VueJ不适用于首次点击或首次事件 [英] VueJs not working on first click or first event

问题描述

我能够创建此动态元素. 我的目的是创建基于计数"的动态div，在该div内，我可以添加多个文本框.

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.

这就是我的想法

您会注意到，第一次单击将不会达到预期的结果.但是，当您第二次单击它时，它将起作用.

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.

我应该缺少一些东西.但是我不知道这是什么，因为我是vue的新手.

I should be missing something. But I don't know what it is as I'm new to 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
        }
      )
    }
  }

})

推荐答案

尝试将var x = 1设置为var x = 0-这样，它应该具有您在第二次单击初始"时所获得的功能.

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

这篇关于VueJ不适用于首次点击或首次事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！