select 输入的选项元素中的 Vuejs v-for。从 JSON 对象中获取值，并在选项值中使用它

Question

<option v-for="{Service, Price} in delivery_array">
    {{Service}} - Rp {{Price}}
</option>

这是我在 delivery_array

中的选项列表

我的delivery_array值：

[
    {"Price": "18000", "Service": "REG"},
    {"Price": "30000", "Service": "FAS"}
]

我想在每个带有 JSON 对象的选项元素中添加 value 属性，如下所示：

{"Price": "THE_PRICE", "Service": "THE_SERVICE"}

所以看起来像这样：

<option v-for="{Service, Price} in delivery_array" value='{"service":{{Service}}, "price":{{Price}} }'>
    {{Service}} - Rp {{Price}}
</option>

但我不知道如何编写这样的代码。

我之前尝试使用像 v-model="Service" 这样的 v-model 属性，但我收到这样的错误消息：

: v-model is not supported on this element type. If you are working with `contenteditable`, it's recommended to wrap a library dedicated for that purpose inside a custom component.

如果我的问题中缺少信息或语法错误。我会编辑它。抱歉我的英语不好。

Answer 1

v-model 应在 select 元素中，value 应在选项中：

<select v-model="delivery">
<option v-for="{Service, Price} in delivery_array" :value='{"service":Service, "price":Price }'>
    {{Service}} - Rp {{Price}}
</option>

</select>

delivery 必须声明为数据属性，值绑定如 :value='...

Answer 2

v-model 位于 select 标签上，因为它包含所选选项的值。您还需要 v-for 上的 key。

我不知道你是否可以直接在 v-for 中使用解构，但这应该可行：

<select v-model="Service">
    <option v-for="item in delivery_array" :value="item.Service" :key="item.Service">
        {{ item.Service }} - Rp {{ item.Price }}
    </option>
</select>

select 输入的选项元素中的 Vuejs v-for。从 JSON 对象中获取值，并在选项值中使用它

Vuejs v-for in option element for select input. Get the value from JSON object, and use it in option value

html

html-select

input

vue.js