Question

通过循环创建块，每个块中都有一个选择。告诉我如何在单击按钮时从所有已创建的选择中获取选择的值？

我尝试了加入ref来进行选择和v-model，但是其中之一无法正常工作

<div v-for="attribute in attributes" class="col">
         {{ attribute.name }}
        <select ref="selectedVariation" class="form-control">
                 <option selected>---</option>
                 <option v-for="variation in attribute.variations"
                         :key="variation.id"
                         :value="variation.id">
                   {{ variation.name }}
                  </option>
         </select>
 </div>
<button class="btn btn-success" @click="addItemToCart()">Test</button>

Answer 1

嗨，嗨，欢迎堆栈溢出。问题中没有足够的细节来提供确切的解决方案，但是以下提示可能会帮助您入门。此外，有几种可行的方法；这只是一种可能性。

首先，在属性对象中包含一个可用于跟踪所选值的属性，也许将其称为.selected。

data: {
    attributes: [
        {name: "Name 1", selected: null, variations: [/*...*/]},
        {name: "Name 2", selected: null, variations: [/*...*/]},
        // ...
    ]
}

第二，使用v-model指令向Vue告知该属性：

<select 
    class="form-control" 
    v-model="attribute.selected"
>

然后，当单击按钮时，代码可以简单地读取适当的值：

methods: {
    addItemToCart() {
        // get an array of variation.id values
        selectedArray = this.attributes.map(attribute => attribute.selected);
    }
}

从每个选择中获取价值

1 个答案: