2

Vue DevTools で見つかった値が正しいという奇妙な問題が発生しています。期待どおりにデータで宣言されています。項目の [編集] を初めてクリックすると、ブラウザ ウィンドウにも正しい値が表示されます。

ただし、数量が異なるアイテムの [編集] をクリックすると、値が間違っていても同じ値が再び表示されます (データベースから事前入力されているはずです)。

次に、最初の「編集」項目をもう一度クリックすると、その値が以前の値で更新されます!

最もクレイジーな部分は、ブラウザ ウィンドウに正しい値が表示されていないのに、常に正しい結果が Vue DevTools に表示されていることです。下の画像の丸で囲まれた項目は、「数量」が 100 の UUID であり、正しい値です。まだ 700 が表示されています (前の編集項目の値)。これまでにこれが起こったことがあり、何が起こるか知っている人はいますか?

ブラウザーが Vue DevTools の (正しい) 値と一致しない

関連するコードの一部を次に示します (vue-resource を使用する Vue コンポーネントからのもので、これは Laravel プロジェクトのブートストラップ モーダルで行われています)。

ビュー 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>
4

1 に答える 1

1

デフォルトでは、カスタム ディレクティブの優先度は1000です。v-model には、テンプレートのコンパイル時に v-chosen の後に評価されるという意味の優先順位があります。800

私の仮定は今です：これはアップデートにも影響を与えています。

つまり、 v-model が要素のリストの属性を$(this.el).trigger("chosen:updated");更新する前に v-chosen の update メソッドが呼び出されると思います。ここで、選択された新しい値がチェックされます。selected<option>

簡単に言えば、これを試してください：

Vue.directive('chosen', {
    priority: 700, // Priority lower than v-model
    twoWay: true, // note the two-way binding
    bind: function () {
    ....
于 2016-04-08T09:37:46.713 に答える