Vue DevTools aktualisiert korrekt, aber kein Browserfenster

Question

Ich habe ein seltsames Problem, bei dem der in Vue DevTools gefundene Wert korrekt ist. Es ist in meinen Daten wie erwartet deklariert. Das erste Mal, wenn ich auf "Bearbeiten" eines Elements klicke, wird der korrekte Wert auch in meinem Browserfenster angezeigt.

Wenn ich jedoch auf "Bearbeiten" eines Elements mit einer anderen Menge klicke, wird der gleiche Wert wieder angezeigt, selbst wenn es falsch ist (es sollte vorher aus der Datenbank gefüllt werden).

Wenn ich dann wieder auf den ersten "Bearbeiten" -Eintrag klicke, wird dieser Wert mit dem vorherigen Wert aktualisiert!

Der verrückteste Teil ist, dass während mein Browser-Fenster nicht den richtigen Wert zeigt, ist, das richtige Ergebnis ist jederzeit in Vue DevTools zeigt nach oben! Der eingekreiste Eintrag im Bild unten ist die UUID für die "Menge" von 100, was der korrekte Wert ist. Dennoch wird 700 angezeigt (der Wert des vorherigen Bearbeitungselements). Hat irgendjemand das jemals zuvor erlebt und weiß was gibt?

Hier einige Auszüge aus relevanten Code (es ist von einem Vue Komponente vue-Ressource verwendet wird, und dies stattfindet in einem Bootstrap-modal in einem Laravel Projekt):

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- Richtlinie:

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 in edit.blade.php Datei:

<script> 
    $(document).ready(function() { 
     $('#lineItemModal').on('shown.bs.modal', function() { 
       $('.chosen-select', this).chosen('destroy').chosen(); 
     }); 
} 
</script> 

Answer 1

standardmäßig benutzerdefinierte Richtlinien haben eine Priorität von 1000. v-model hat eine priority von 800, was bedeutet, dass sie nach v-ausgewählt ausgewertet wird, wenn die Vorlage kompiliert wird.

Meine Annahme ist jetzt: Dies betrifft auch das Update.

Was meine ich damit: Ich denke, $(this.el).trigger("chosen:updated"); in der v-gewählten Update-Methode aufgerufen wird, bevor v-Modell das selected Attribut auf der Liste der <option> Elemente aktualisieren tat - und das ist, wenn die Kontrollen für den neuen gewählten Wert gewählt.

lange Geschichte kurz: versuchen Sie dies:

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