0

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

<!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/[email protected]/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">あdd</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:"名前1",a:20,i:"Java"},
                    {n:"名前2",a:12,i:"C"},
                    {n:"名前3",a:21,i:"Python"}
                ]                                   
            },methods: {
                addList: function () {
                    this.array.push({n:myText,a:myTExt,i:myTEXt});
                }
            }
        })

    </script>
</body>

</html>

1 件の回答 1

1

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

以下のように修正すると動作すると思います。変更点は 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

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

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

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

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

<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>
new Vue({
  el: '#app',
  data: {
    taxt: '',
    tags: [],
  },
  methods: {
    addTag() {
      this.tags.push(this.text)
      this.text = ""
    }
  }
})

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。