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

Question

将选择元素绑定(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 是最可读的。