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 
} 
} 

总之它renderes #wordsdiv的wordupload.wordcount数，我特林给那些wordinput阵列中wordsdiv一个点的输入端。但是如果它不存在的话，我不能将它们的价值模型化。任何想法是什么将是最好的方式来存储这些动态呈现的输入值将不胜感激。

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' 
});