76172


Vueで配列へ要素を追加する際の書き方を教えていただきたいです。テキストエリアに入力して、ボタンを押すと関数が動いて配列に追加されるようにしたいのですが、テキストエリアに入力されたものを変数にいれて、そのあと配列にいれるという記述方法がわかりません。

[code]

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>
            Vue.js sample
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            
            なまえ:<textarea v-model="myText"></textarea>
            とし:<textarea v-model="myTExt"></textarea>
            たんとー:<textarea v-model="myTEXt"></textarea> 
            <button v-on:click="addList">あｄｄ</button>
            <li v-for="t in array">{{t.n}}  {{t.a}}  {{t.i}} </li>
                     
        </div>
    
        <script>
            new Vue({
                el: "#app",
                myText:"",
                myTExt:"",
                myTEXt:"",
                data: {
                    array:[
                        {n:"名前１",a:20,i:"Java"},
                        {n:"名前２",a:12,i:"C"},
                        {n:"名前３",a:21,i:"Python"}
                    ]                                   
                },methods: {
                    addList: function () {
                        this.array.push({n:myText,a:myTExt,i:myTEXt});
                    }
                }
            })
    
        </script>
    </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2021-05-29T02:00:53.793
76168
2021-05-29T06:00:12.313
2021-05-29T05:41:39.433
3060
41769
question
vue.js
vue.jsでの配列への要素追加


質問が正しく見えていなかったので回答修正します。

以下のように修正すると動作すると思います。変更点は `myText,myTExt,myTEXt` をdata内に移動、methods内に参照する場合に
`this` を追加しています

基本的にVue.jsで利用する変数はdataでプロパティを記述してください

<https://jp.vuejs.org/v2/guide/instance.html#%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A8%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89>

[code]

    new Vue({
      el: "#app",
      data: {
        myText:"",
        myTExt:"",
        myTEXt:"",
        array:[
          {n:"名前１",a:20,i:"Java"},
          {n:"名前２",a:12,i:"C"},
          {n:"名前３",a:21,i:"Python"}
        ]                                   
      },
      methods: {
        addList: function () {
          this.array.push({n: this.myText, a: this.myTExt, i: this.myTEXt})
        }
      }
    })
    
[/code]

* * *

追記: 参考までに前回答を残しておきます

シンプルに実装してみました  
テキスト入力の内容を配列に保存する処理です

もう少し複雑なケースを想定する場合は詳細を記述してください

[code]

    <div id="app">
      <label>
      tag: <input type="text" v-model="text" />
      </label>
      <button type="button" @click="addTag">add</button>
     
       <div>
         tags: <span class="tag" v-for="(tag, i) in tags" :key="i">{{ tag }}</span>
       </div>
    </div>
    
[/code]

[code]

    new Vue({
      el: '#app',
      data: {
        taxt: '',
        tags: [],
      },
      methods: {
        addTag() {
          this.tags.push(this.text)
          this.text = ""
        }
      }
    })
    
[/code]

<https://jsfiddle.net/sugumura/u0s5wnck/6/>


CC BY-SA 4.0
2021-05-29T05:16:59.643
76172
2021-05-29T06:00:12.313
2021-05-29T06:00:12.313
298
298
76168
answer