Question

我遇到一个奇怪的问题，即在Vue DevTools中找到的值是正确的。它按照预期在我的数据中声明。我第一次点击＆＃34;编辑＆＃34;一个项目，正确的值也显示在我的浏览器窗口中。

但是，如果我点击＆＃34;编辑＆＃34;一个具有不同数量的项目，即使它不正确，也会再次显示相同的值（它应该从数据库中预先填充）。

然后，如果我点击第一个＆＃34;编辑＆＃34;再次声明该值将使用之前的值更新！

最疯狂的部分是当我的浏览器窗口没有显示正确的值时，始终在Vue DevTools中显示正确的结果！下图中带圆圈的项目是＆＃34;数量＆＃34;的UUID。 100，这是正确的值。然而，700显示（之前的编辑项目的值）。有人曾经发生过这种情况并且知道是什么给出了吗？

这里有一些相关代码的片段（它来自使用vue资源的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-directive：

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选择后对其进行评估。

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

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

长话短说：试试这个：

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

Vue DevTools正确更新但不更新浏览器窗口

1 个答案: