VueJs not working on first click or first event

问题

I was able to create this dynamic elements. My purpose in this is to create dynamic divs that will be based on "count", and inside that div, I can add multiple textboxes.

Here's what I came up with

You'll notice that the first click, it will not be the expected result. But when you click it the 2nd time, it will work.

I should be missing something. But I don't know what it is as I'm new to vue.

Here's the code as well:

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

Try setting var x = 1 to var x = 0 - that way it should have the functionality you get on the second click on initial.

来源：https://stackoverflow.com/questions/60077788/vuejs-not-working-on-first-click-or-first-event