CODEWITHSUNDEEP
javascripthtmldynamicvue.js
JFugger_jr
JFugger_jr

Reputation: 313

V-bind with dynamically rendered components

I have a simple code where I have got input fields for the user and the user can click on a button to render more input fields, and I want to store those input fields.

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

In short it renderes wordupload.wordcount number of #wordsdiv, and I am tring to give the input of those wordsdiv a spot in the wordinput array. But I can't v-model their value to the spot if it doesn't exist. Any ideas on what would be the best way to store those dynamically rendered input values would be much appreciated.

Upvotes: 0

Views: 248

Answers (1)

Brian Glaz
Brian Glaz

Reputation: 15696

Are you looking for something like this? 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'
});

Upvotes: 1

Related Questions