vue.js - VueJS 将选择绑定(bind)到对象，但仍然是 POST 字符串

Question

将 select 元素绑定(bind)到对象(而不是字符串值)但仍然让 HTML 元素提交字符串值的正确方法是什么？

我已经成功地让它工作了，但看起来我似乎正在利用一个错误:

<select v-model="selected" v-on:change="price=selected.price">
    <option v-for="item in items" v-bind:value="item" value="{{ item.id }}">{{ item.name }}</option>
</select>

这按预期工作:“selected”属性附加到“item”对象，但表单仅 POST 项目的 ID。但是，如果我颠倒 HTML 属性的顺序，使 value={{ item.id }} 出现在 v-bind:value="item"之前，则表单 POST“[Object]” 而不是，例如“3”。

它如此脆弱的事实让我觉得我做错了什么。

那么处理这个问题的正确方法是什么？

Answer 1

我也遇到过类似的情况，我构建了多个 vue 组件，这些组件既可以在 vue 组件中使用，也可以在标准表单中使用。

<select v-model="selected" v-on:change="price=selected.price">
    <option v-for="item in items" :value="JSON.stringify(item)">{{ item.name }}</option>
</select>

看起来就是你想要的。我也成功地使用了计算属性或过滤器，但我认为 stringify 最具可读性。