Vue.js

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 元素 – 对 DOM 的任何更改都必须由 Vue 进行。换句话说，您通常会使用 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.

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

Vue.js - Using v-model on cloned inputs

jquery