1
ルートロード時にキャッシュからフォーム値をロードしようとしているので、あるルートから別のルートにナビゲートすると、設定。チェックボックスとテキスト入力が正しく機能しています。選択肢だけに問題があるようです。ここで
の要素です：
<select id="client" name="client[]" multiple="" v-model="chosen_clients">
<option v-for="client in clients" v-bind:client="client" :value="client.id">@{{ client.name }}</option>
</select>
まず、私はキャッシュをチェックして、アドレスバーを更新します。
beforeCreate: function(){
if(sessionStorage.getItem('invoiceable')){
router.push({ path: '/invoiceable?'+sessionStorage.getItem('invoiceable')});
}
},
それから私は、アドレスバーにデータをバインドします
data: function(){
return {
chosen_clients: this.$route.query['client[]'] ? (Array.isArray(this.$route.query['client[]']) ? this.$route.query['client[]'] : [this.$route.query['client[]']]) : [],
}
},
その後、マウントした後、データを取得してアドレスバーを更新したいが、問題がある：
var data = $('#invoiceable-form').serialize();
//This information does not match
console.log(this.chosen_clients); //This is correct
console.log($('#client').val(); //This is empty, even though visually, the select has selected options
最終的に$（ '＃client'）.val（）は正しい値を持っています（視覚的に選択されたオプションがシリアル化されたフォームの一部として表示されることを意味します）。これは私が知っているのは、console.logがbeforeUpdateに1秒未満で設定されていて、その値が.serializedに存在しなかったからです。これは選択とのやりとりなしで表示されます。私が手動で$（ '＃client'）を設定したとしても、val（[2,12]）;私が.serialize（）する前に正しい値はそこにありません。私は手動で.serializeの結果にデータを追加することで問題を強制することができますが、それはハッキリです。
DOMがデータと同期するためには、[next tick]（https://vuejs.org/v2/api/#Vue-nextTick）を待つだけでよいでしょう。 –
オプションが選択されていることを除いて、私はそれを完全に打ち破っています！私は確認のために警告を発するつもりです。他のすべての入力タイプが正しく動作しているとも言いたいと思います。私は正しく動作するチェックボックスとテキスト入力を持っています。 – Stephane
あなたはそうです。選択オプションはまだロードされていません。ありがとう！ – Stephane