Question

我想做的是在循环中设置v-model。我已经尝试了一些方法，但从未成功。

我当前的代码是这样的。

ChildComponent.vue

<div v-for="(child, index) in numberOfChildren">
    <input v-model="" />
    ...
<div>

 ...
 props: ["parent"],
 data() {
    return {}
 },
 methods: {

 },

我想根据其在for循环中的索引来设置v-model，例如parent.child1，parent.child2，parent.child3...。

我该如何实现？

在父组件中，

<div v-for="(parent, index) in parents">
    <ChildComponent>
</div>


data() {
    return {
        parents: [
                {
                 child_1: '',
                 child_2: '',
                 ...
                },
                {
                 child_1: '',
                 ...
                 }
            ]
        }
    }

Answer 1

您可以利用计算所得的属性来获取“父” prop的当前索引值，并将该值设置为v模型输入值。请看下面：

模板：

<div>
    <input v-model="returnItem" />
    ...
    <button @click="changeIndex();"></button>
</div>
 ...

脚本：

props: ["parent"],
data() {
     return {
       index : 0
    }
},
computed: {
     returnItem: {
        get () {
           let item = this.parent[this.index];
           return item;
    },
        set (theItem) {
           this.item = theItem;
    }
},
methods: {
       changeIndex: function () {
          some logic to toggle this.index
       }
    },
mounted () {
   this.index = whatever value you want to start with on load (i.e., 5);
}

VueJS：在循环内部设置动态v模型

1 个答案: