我遇到了一个奇怪的问题,即在 Vue DevTools 中找到的值是正确的。它按预期在我的数据中声明。我第一次点击“编辑”某个项目时,正确的值也会显示在我的浏览器窗口中。
但是,如果我单击“编辑”具有不同数量的项目,相同的值会再次显示,即使它不正确(它应该从数据库中预填充)。
然后,如果我再次点击第一个“编辑”项,该值将更新为之前的值!
最疯狂的部分是,虽然我的浏览器窗口没有显示正确的值,正确的结果始终显示在 Vue DevTools 中!下图中圈出的项目是“数量”为 100 的 UUID,这是正确的值。然而 700 出现了(前一个编辑项的值)。以前有人遇到过这种情况并且知道是什么原因造成的吗?
这是一些相关代码片段(它来自使用 vue-resource 的 Vue 组件,并且发生在 Laravel 项目的引导模式中):
VueJS
data() {
return {
selected_options: {},
attributes: [],
}
},
methods: {
editLineItem: function (line_item) {
this.getProductOptionsWithAttributes(line_item.product_id);
this.getPrepopulatedOptionsForLineItem(line_item.id);
},
getProductOptionsWithAttributes: function (product_id) {
var local_this = this;
var url = '/api/v1/products/' + product_id + '/options';
this.$http.get(url).then(function (response) {
local_this.attributes.$set(0, response.data);
}, function (response) {
// error handling
});
},
getPrepopulatedOptionsForLineItem: function (id) {
var local_this = this;
var url = '/api/v1/line_items/' + id + '/options';
this.$http.get(url).then(function (response) {
Object.keys(response.data).forEach(function (key) {
Vue.set(local_this.selected_options, key, response.data[key]);
});
}, function (response) {
//@TODO Implement error handling.
});
},
}
HTML
<div v-for="(key, attribute) in attributes[0]" class="col-md-12 selectbox_spacing">
<label for="option_{{$index}}">{{key}}</label><br/>
<select class="chosen-select form-control" v-model="selected_options[key]" v-chosen="selected_options[key]" id="option_{{$index}}">
<option v-for="option in attribute" value="{{option.id}}">{{option.name}}</option>
</select>
</div>
<button v-on:click="editLineItem(line_item)">
Main.js vue 指令:
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function () {
$(this.el)
.change(function(ev) {
// two-way set
//this.set(this.el.value);
var i, len, option, ref;
var values = [];
ref = this.el.selectedOptions;
if(this.el.multiple){
for (i = 0, len = ref.length; i < len; i++) {
option = ref[i];
values.push(option.value)
}
this.set(values);
} else {
this.set(ref[0].value);
}
}.bind(this));
},
update: function(nv, ov) {
// note that we have to notify chosen about update
$(this.el).trigger("chosen:updated");
}
});
var vm = new Vue({
el : '#wrapper',
components: {
LineItemComponent
}
});
edit.blade.php 文件中的脚本:
<script>
$(document).ready(function() {
$('#lineItemModal').on('shown.bs.modal', function () {
$('.chosen-select', this).chosen('destroy').chosen();
});
}
</script>
最佳答案
默认情况下,自定义指令的优先级为 1000
. v-model 有一个 priority的 800
这意味着在编译模板时在 v-chosen 之后对其进行评估。
我现在的假设是:这也会影响更新。
我的意思是:我认为 $(this.el).trigger("chosen:updated");
在 v-model 刷新 selected
之前调用 v-chosen update 方法<option>
列表中的属性elements - 这就是 chosen 检查新选定值的地方。
长话短说:试试这个:
Vue.directive('chosen', {
priority: 700, // Priority lower than v-model
twoWay: true, // note the two-way binding
bind: function () {
....
关于javascript - Vue DevTools 正确更新但浏览器窗口不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36488694/