如何在 Vue 中为 v-model 使用多维数组？

Question

我想根据用户检查的属性值为在线商店生成属性变体。

问题是我不知道如何从 v-model 访问属性值以及 v-model 必须是什么类型的数据？

我被困在这里。下面是我的代码。

谢谢！

<div v-for="(attribute, index) in attributes">
    <p>{{ attribute.name }}</p>
    <div v-for="(attributevalue,indexval) in attribute.attribute_values">
        <input v-model="attributes[index][indexval]"  :value="attributevalue.id">
        <label>{{ attributevalue.name }}</label>
    </div>
</div>
<p>Generate</p>

export default {
   props:{
     attributes:{
      type:Array
     }
   }
}

Answer 1

如果你想将'id'绑定到输入，这就是你应该做的 -

<input type="text" v-model="attributevalue.id" >

不需要这个attributes[index][indexval]，因为你有一个嵌套的for循环，它的作用完全一样。因此，您可以直接使用attributevalue 在 v-model 中访问其属性。

关于 v-model 的说明：

它是 vue 中的双向绑定机制，只要您的组件支持该类型，它就会接受您想要传递给底层组件的任何类型的值。在这种情况下，文本类型的输入接受字符串/数字值。

v-model 内部使用不同的属性并为不同的输入元素发出不同的事件：

• text 和 textarea 元素使用 value 属性和输入事件；
• 复选框和单选按钮使用选中的属性和更改事件；
• 选择字段将值用作道具并将更改用作事件。