VueJs не работает при первом клике или первом событии - PullRequest
Новая
       15

VueJs не работает при первом клике или первом событии

0 голосов
/ 05 февраля 2020

Мне удалось создать эти динамические c элементы. Моя цель в этом заключается в создании динамических c div, которые будут основаны на "count", и внутри этого div я могу добавить несколько текстовых полей.

Вот что я придумала

Вы заметите, что при первом клике это не будет ожидаемым результатом. Но когда вы щелкнете по нему во второй раз, это сработает.

Я должен что-то упустить. Но я не знаю, что это такое, поскольку я новичок в vue.

А вот и код: 

<div id="app">
    <button @click="populate">Populate</button>

        <div v-for="(input, act) in inputs" >
          Id 
          <div v-for="(i, ii) in input.items">

            <input type="text" v-model="i.name">
          </div>

          <button v-show="act > 0" @click=input_add(act)>Add</button>
        </div>
    {{inputs}}
  </div>


const app = new Vue({

  el: '#app',

  data: {
    inputs: [],
    counter: 0,
    count: 3
  },

  methods: {
    populate(){
      var x = 1
      while(x <= this.count){
        this.inputs.push(
          {
            id: this.counter + 1, 
            items: []
          }
        )
        this.input_add(x)
        this.counter++
        x++
      }
    },
    input_add(x){
      this.inputs[x].items.push(
        {
         name: null
        }
      )
    }
  }

})

1 Ответ

0 голосов
/ 05 февраля 2020

Попробуйте установить var x = 1 на var x = 0 - таким образом, он должен иметь ту функциональность, которую вы получаете при втором щелчке по первому.

...