vue.js 选择不在 $(element).val() 中的 v-model 值

Question

我正在尝试在路由加载时从缓存中加载表单值，因此如果有人从一条路线导航到另一条路线，他们不会丢失他们的设置。复选框和文本输入正常工作。只有选择似乎有问题。

这是元素：

<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() 具有正确的值（意味着可见选择的选项显示为序列化表单的一部分。我知道这一点，因为我在 beforeUpdate 上设置了 console.logs 小于在 .serialized 中不存在该值之后的第二个，它显示没有与选择进行任何交互。即使我手动设置 $('#client').val([2,12]); 在我 .serialize() 正确之前值不存在。我可以通过手动将数据添加到 .serialize 的结果来强制解决问题，但这感觉很麻烦。

Answer 1

@Roy J 是对的。选择选项尚未加载。