Override data in vue

Question

I'm using a mixin to add and override vue data. I am able to add new data, but I cannot seem to override existing data. Here is the simple code:

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

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

When I run it, 'test' equals 'blah' properly, but 'foo' still equals 'bar'. Is there anyway to have a mixin override existing vue data in addition to adding new data?

Here is a fiddle:

https://jsfiddle.net/8v9sfxok/

tony19 · Accepted Answer · 2022-07-16 00:03:55Z

2

From the mixins documentations:

Options that expect object values ... will be merged into the same object. The component’s options will take priority when there are conflicting keys in these objects

(emphasis mine).

If you want a different merge strategy, you can define one.

edited Jul 16, 2022 at 0:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 18, 2017 at 13:41

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David L · Accepted Answer · 2017-02-17 20:15:35Z

0

One way around this is to create a method in your mixin and invoke that from your template:

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

answered Feb 17, 2017 at 20:15

David L

34.1k8 gold badges70 silver badges98 bronze badges

Comments

matt · Accepted Answer · 2017-02-21 18:43:54Z

0

As some have mentioned, mixins cannot override existing data. For this I had to take my original component and make it a "base" component. Then use the "extends" option in another component to override existing data.

answered Feb 21, 2017 at 18:43

matt

7002 gold badges9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Override data in vue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related