Vue DevToolsは正しく更新されますが、ブラウザウィンドウは更新されません。

Question

Vue DevToolsの値が正しいところで奇妙な問題が発生しています。期待どおりのデータで宣言されています。アイテムを「編集」して初めて、ブラウザウィンドウに正しい値が表示されます。

しかし、「数量の異なるアイテムを編集」をクリックすると、間違っていても同じ値が再度表示されます（データベースからあらかじめ入力する必要があります）。

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

クレイジーな部分は私のブラウザウィンドウが正しい値を示していない間、正しい結果が常にでVueのデベロッパーツールにまで表示されていることです！下の画像の円で囲んだ項目は、「数量」100のUUIDです。これは正しい値です。それでも700が表示されます（前の編集項目の値）。今までにこれが起こったことがあった人は誰ですか？

ここでは、関連するコードのいくつかのスニペット（それはVUE-リソースを使用してVueのコンポーネントからだし、これはLaravelプロジェクトのブートストラップモーダルで行われている）です。

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-ディレクティブ：edit.blade.phpファイルで

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 
    } 
}); 

スクリプト：デフォルトで

<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-selectedの後に評価されます。

私の前提が更新されました。これはアップデートにも影響します。そして新しい選択した値のチェックを選択した場所それはだ - Vモデルは<option>要素のリストにselected属性を更新しました前に呼び出され、私はV-選択した更新方法で$(this.el).trigger("chosen:updated");を考える：私はそれで意味

。

かいつまん：これを試してみてください。

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