Vue DevTools 更新正确但浏览器不更新 window

Question

我遇到一个奇怪的问题，即在 Vue DevTools 中找到的值是正确的。它按预期在我的数据中声明。我第一次点击 "Edit" 一个项目时，正确的值也会显示在我的浏览器中 window。

但是，如果我单击 "Edit" 一个具有不同数量的项目，相同的值会再次显示，即使它不正确（它应该从数据库中预填充）。

然后，如果我再次单击第一个 "Edit" 项目，该值将更新为之前的值！

最疯狂的部分 是虽然我的浏览器 window 没有显示正确的值，正确的结果显示在 Vue DevTools 中所有时间！下图中圈出的项是"Quantity" 100 的UUID，这是正确的值。然而 700 出现了（前一个编辑项的值）。以前有人遇到过这种情况，知道是什么原因吗？

这里有一些相关代码片段（它来自使用 vue-resource 的 Vue 组件，并且发生在 Laravel 项目的 bootstrap 模态中）：

Vue JS

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>

Answer 1

默认情况下，自定义指令的优先级为 1000。 v-model 的 priority 为 800，这意味着在编译模板时选择 v-model 后对其进行评估。

我现在的假设是：这也影响了更新。

我的意思是：我认为 v-chosen 更新方法中的 $(this.el).trigger("chosen:updated"); 在 v-model 刷新 <option> 元素列表中的 selected 属性之前被调用- 这就是选择检查新选择值的地方。

长话短说：试试这个：

Vue.directive('chosen', {
    priority: 700, // Priority lower than v-model
    twoWay: true, // note the two-way binding
    bind: function () {
    ....

Vue DevTools 更新正确但浏览器不更新 window

Vue DevTools updating correctly but not browser window

javascript

jquery

laravel

vue.js

vue-resource