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

1 个答案: