動的にレンダリングされたコンポーネントとV-bind

Question

私はユーザーの入力フィールドを持っているシンプルなコードを持っています。ユーザーはボタンをクリックして入力フィールドをさらに表示できます。要するに

<div id='wordslist'> 
      <div class='announcement'>Voer hieronder uw woorden in</div> 
      <div class='wordsdiv'> 
      <div id='onedictspec' v-for='arrayspot in wordupload.wordcount'> 
       <input type='text' class='inputwordtext' v-model='arrayspot[wordupload.wordcount][0]'> 
       <input type='text' class='inputwordtext' v-model='arrayspot[wordupload.wordcount][1]'> 
      </div> 
      </div> 
      <div id='morewords'> 
      <button class='morewordsbtn active hover' v-on:click='morewords'>More words</button> 
      </div> 

Vuejs

data{ 
wordupload: { 
wordcount: 20, 
wordinput: [], 
} 
} 
methods: { 
morewords: function() { 
    this.wordupload.wordcount += 30 
} 
} 

それは#wordsdivのwordupload.wordcount数をレンダラー、と私はそれらのwordinput配列のスポットをwordsdivの入力を与えることトリングています。しかし、もし存在しなければ、その価値を現実のものにvモデル化することはできません。これらの動的にレンダリングされた入力値を格納する最良の方法が何であるかについてのアイデアは、非常に高く評価されます。

Answer 1

このようなものをお探しですか？ https://jsfiddle.net/2nn58fa8/1/

Vue.component('wordlist', { 
    data: function() { 
    return { 
     wordupload: { 
     wordcount: 20, 
     wordinput: [], 
     } 
    } 
    }, 
    created: function() { 
    this.wordupload.wordinput.length = this.wordupload.wordcount; 
    }, 
    methods: { 
    morewords: function() { 
     this.wordupload.wordcount += 30; 
     this.wordupload.wordinput.length = this.wordupload.wordcount; 
    }, 
    checkwords: function() { 
     console.log(this.wordupload.wordinput); 
    } 
    } 

}); 

var vue = new Vue({ 
    el: '#app' 
});