设置VueJS模型属性不会更新DOM中的select元素

Question

我有一个使用VueJS（1.0）的级联下拉列表，我遇到了一个问题，即Vue模型中的更改没有反映在DOM中。

下拉列表中的元素需要是一个对象，但一旦选中，我就会尝试将属性/下拉列表的值更改为int。

我正在使用监视事件执行此操作，该事件处理来自对象的必要信息，然后使用属性上的$set将其设置为所需的int。

使用VueJS Chrome开发工具，我可以看到组件属性上反映的更改，但是在提交表单时，它将作为字符串[object Object] POST，就像DOM从未更新过一样。

以下是模板中的相关下拉列表：

<select :disabled="releases.length &lt; 1" v-model="release" options="releases" class="form-control input-sm" name="{{formname}}[release_id]">
    <option selected="selected" value="">Choose Release...</option>
    <option v-for="obj in releases" v-bind:value="obj">{{obj.text}}</option>
</select>

以下是观看活动：

"release": function() {
   this.$parent.$data.promos = this.release.promos;
   this.$set('release', this.release.id);
}

更改下拉列表后，将更新根promos属性，并根据dev工具将组件的release属性正确设置为id

但是当提交表单时，我只是获取对象的字符串表示！

有谁知道我在这里做错了什么; 或者这是一个VueJS错误/是否有解决方法？

谢谢！

Answer 1

选项的value属性可以绑定到Vue中的对象，但浏览器仍然需要将值呈现为有效的HTML，以便将对象强制转换为字符串。

您可以做的一件事是向表单添加一个隐藏字段，其值设置为所选发布对象的ID。

---

编辑 ：另一个选项可能是覆盖类原型的toString方法以返回对象的ID。

Answer 2

除非我可以在jsFiddle或同等版本中使用它，否则我将无法在您的代码中找到该错误。

但是我在这里有一个级联下拉列表的替代实现： https ： //jsfiddle.net/mani04/Lgxrcc5p/1/

你可能会看到它是否提供任何指针。 此示例使用Vue 2.0.3

在上面的代码示例中，我特别不理解这部分：

<select :disabled="releases.length &lt; 1" ...

这是复制粘贴错误吗？ 我希望你的编辑器中有以下代码：

<select :disabled="releases.length < 1" ...