Daten in Vue überschreiben

Question

Ich verwende ein Mixin, um Vue-Daten hinzuzufügen und zu überschreiben. Ich kann neue Daten hinzufügen, aber ich kann bestehende Daten nicht überschreiben. Hier ist der einfache Code:

var mixin = { 
    data: function() { 
    return { 
     foo: 'boo', 
     test: 'blah' 
    } 
    } 
} 

var vm = new Vue({ 
    el: '#vue-instance', 
    mixins: [mixin], 
    data: function() { 
    return { 
     foo: 'bar' 
    } 
    } 
}); 

Wenn ich es laufen, 'test' gleich 'blah' richtig, aber 'foo' gleich noch 'bar'. Gibt es trotzdem ein Mixin, das vorhandene Vue-Daten überschreibt und neue Daten hinzufügt? Hier

ist eine Geige:

https://jsfiddle.net/8v9sfxok/

Answer 1

Wie einige bereits erwähnt haben, können Mixins bestehende Daten nicht überschreiben. Dafür musste ich meine ursprüngliche Komponente nehmen und sie zu einer "Basiskomponente" machen. Verwenden Sie dann die Option "extends" in einer anderen Komponente, um vorhandene Daten zu überschreiben.

Answer 2

Ein Weg, um dies ist ein Verfahren, in Ihrem mixin zu erstellen, und rufen Sie das aus Ihrer Vorlage:

html:

<div id="vue-instance"> 
    <p> 
    {{getFoo()}} 
    </p> 
    <p> 
    {{test}} 
    </p> 
</div> 

JavaScript:

var mixin = { 
    data: function() { 
    return { 
     foo: 'baz', 
     test: 'blah' 
    } 
    }, 
    methods: { 
    getFoo: function() { 
     return 'baz'; 
    } 
    } 
} 

var vm = new Vue({ 
    el: '#vue-instance', 
    mixins: [mixin], 
    data: function() { 
    return { 
     foo: 'bar' 
    } 
    } 
}); 

JSFiddle

Answer 3

Vom mixins documentations:

Optionen, die Objektwerte erwarten ... wird in der gleichen Objekt verschmolzen werden. Die Optionen des Komponente Priorität, wenn es widersprüchliche Schlüssel in diesen Objekten

(Hervorhebung von mir) sind.

Wenn Sie eine andere Zusammenführungsstrategie wünschen, you can define one.