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数组中给这些单词的输入提供一个点。但是，如果它不存在，我就不能将它们的价值模拟到现场。关于什么是存储这些动态渲染输入值的最佳方法的任何想法都将非常感激。

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

与动态呈现的组件进行V-bind

1 个答案: