我正在尝试在路由加载时从缓存加载表单值,因此如果有人从一个路由导航到另一个路由,则他们不会丢失其设置。复选框和文本输入正常工作。只有选择似乎有问题。
这是元素:
<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少于a在.serialized中没有值之后的第二个,它显示没有与select的任何交互。即使我手动设置$('#client')。val([2,12]);在我.serialize()之前正确价值不存在。我可以通过手动将数据添加到.serialize的结果来强制解决问题,但这感觉很糟糕。
答案 0 :(得分:0)
@Roy J是对的。尚未加载选择选项。