VueJSモデルプロパティを設定してもDOM内の選択要素が更新されない

Question

VueJS（1.0）を使用してカスケードドロップダウンがあり、Vueモデルの変更がDOMに反映されないという問題があります。

ドロップダウンの要素はオブジェクトである必要がありますが、一度選択するとプロパティ/ドロップダウンの値をintに変更しようとしています。

このイベントは、オブジェクトから必要な情報を処理し、次にプロパティの$setを使用して、必要なintに設定します。

VueJS Chrome開発ツールを使用すると、コンポーネントのプロパティに反映された変更が表示されますが、フォームを送信するときには、DOMが更新されなかったかのようにという文字列としてPOSTされます。ここで

は、テンプレート内の関連するドロップダウンです：

<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に値を設定して、フォームに非表示フィールドを追加することができます。

---

編集：別のオプションは、オブジェクトのIDを返すために、クラスのプロトタイプのtoStringメソッドをオーバーライドすることができます。