Vue.js - 在克隆输入上使用v-model

Question

我对Vue很新.我有一个文本输入,我使用jquery克隆.但是,v-model不接受来自克隆输入的输入.它仅从第一个输入获取输入.

$(document).ready(function() { 
    $("#add").click(function() { 
        $('#listing').clone(true).insertAfter('#listing'); 
        return false; 
    }); 
}); 

<div>
    <strong>Where are you listed?</strong>
    <input type="text" name="listing" id="listing" class="form-control" v-model="rowInput" v-on="blur: addData">
    <a id="add">Add another</a>
</div>

Answer 1

您无法克隆已编译的Vue DOM元素 - 必须由Vue对DOM进行任何更改.换句话说,你通常会使用jQuery,或者你会使用Vue来修改DOM - 你通常不会同时使用它们.

在你的情况下,我会看到使用v-repeat绑定到这样的数组:

<div v-repeat="listing in listings">
    <strong>Where are you listed?</strong>
    <input type="text" name="listing" id="listing" class="form-control" v-model="listing.value" v-on="blur: addData">
    <a v-on="click: $parent.add">Add another</a>
</div>

并在JavaScript中:

new Vue({
    data: {
        listings: [{ 
            value: ""
        }]
    },
    methods: {
        add: function (event) {
            this.listings.push({
                value: ""
            });
        }
    }
});

编辑:注意,这个答案是针对Vue 1.X. 在Vue 2.X和更新版本下,你需要v-for代替v-repeat.