将选择元素绑定到对象（而不是字符串值）但仍然让 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”对象，但表单仅发布项目的 ID。但是，如果我颠倒 HTML 属性的顺序，使 value={{ item.id }} 出现在 v-bind:value="item" 之前，那么表单会发布“[Object]”，而不是例如“ 3"。
它如此脆弱的事实让我觉得我做错了什么。
那么处理这个问题的正确方法是什么？
【问题讨论】：
标签： vue.js
我有过类似的情况，我构建了几个 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 是最易读的。
【讨论】：
我使用这种方法修复了它：
<select v-model="product">
<option v-for="obj in choices" :value="obj">{{ obj.name }}</option>
</select>
<input type="hidden" name="product" :value="choice.id">
总而言之：不要给您的 select 命名，而是将该名称提供给您的 hidden 输入，并提供 ID 作为该元素的值。
【讨论】：
我在这两种情况下都看到，HTML 呈现如下：
<select>
<option value="[object Object]">name1</option>
<option value="[object Object]">name2</option>
<option value="[object Object]">name3</option>
<option value="[object Object]">name4</option>
</select>
案例一：v-bind:value="item" value="{{ item.id }}"：fiddle
案例2：value="{{ item.id }}" v-bind:value="item"：fiddle
因此，就呈现 HTML 而言，这两种情况是等价的。没有混淆的理想方法就是使用v-bind:value="item"，如下所示：
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" v-bind:value="item">{{ item.name }}</option>
</select>
您应该将v-bind 转换为item 或item.id，具体取决于您要分配给selected 变量的内容。
【讨论】：
v-bind 到item 那么表单提交的值就是字符串“[object Object]”。如果我 v-bind 到 item.id，那么这个问题就解决了，但 selected 模型只是 id，而不是整个项目，我需要它。
selected 成为完整模型：selected 将是您在<option> 中使用v-bind 的任何内容。我在http://jsfiddle.net/sh9kd1gg/2/ 中将selected 视为整个项目。