設置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" ...