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属性，并根据开发工具将组件的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" ...

设置VueJS模型属性不会更新DOM

2 个答案: