Question

单击按钮后，我可以动态添加文本框。我的问题是我无法设置动态ID和值。

<div id="app">
        <div>
            <button class="button btn-primary" @click="addRow">Add row</button>
        </div>
        <div v-for="row in rows">
            <button-counter></button-counter>
        </div>
    </div>       
    <script>    
        Vue.component('button-counter', {
            template: '<input type="text" style="margin-top: 10px;" ><br>'
        })    
        var app = new Vue({
            el: "#app",
            data: {
                rows: [],
                count:0              
            },
            methods: {
                addRow: function () {
                    var txtCount=++this.count;
                    id='txt_'+txtCount;
                    this.rows.push({ title: "first", description: "textbox1" });
                }
            }
        });

    </script> 


  This is my code.

我已经在输入组件上创建了一个vue实例。单击添加行按钮时，它将添加一个新的文本框。但是我不知道为文本框绑定id和值。

Answer 1

您可以在行数组中传递ID

<div v-for="row in rows" :id=row.id>
  <button-counter></button-counter>
</div>

并在添加新行时传递ID

this.rows.push({ title: "first", description: "textbox1", id });

Answer 2

您可以在id项目中添加rows并将其用作ID。但是我假设您正在执行此操作，以便稍后可以检索输入值。有更好的方法可以做到这一点。

在父数据对象上定义values对象。像这样：

data: {
  rows: [],
  values: {},
  count:0              
},

每次添加新行时，都向其添加反应性属性：

addRow: function () {
  var txtCount=++this.count;
  id='txt_'+txtCount;
  this.rows.push({ title: "first", description: "textbox1"});
  this.$set(this.values, id, '')
},

在自定义组件上定义一个value道具，并在每次值更改时发出一个input事件。准备好自定义组件以接收v-model

Vue.component('button-counter', {
 props: ['value'],
 template: '<input type="text" @input="$emit(\'input\', 
  arguments[0].srcElement.value)" style="margin-top: 10px;" ><br>'
})

将每个自定义组件绑定到正确的v-model

<button-counter v-model='values[row.id]'></button-counter>

现在您可以访问父组件中values中的所有输入值。

这是工作中的jsfiddle。

顺便说一句：您收到错误消息，因为您的自定义组件具有多个根。您需要删除br或添加一个包装元素。

Answer 3

好吧，首先，为了识别每个输入元素，您需要将:key attr添加到v-for

要绑定值，您可以在创建输入元素时将value和id作为属性来传递，并将值传递给输入类型的v模型，以便无论何时创建，都可以将其包含在输入中。

这里是JsFiddle

希望这会有所帮助！

Vue js单击按钮时动态添加文本框时绑定动态ID

3 个答案: