How to set data for vue variable

Question

I have 2 vue variables. I want to set data for vue1 from vue2. What is the correct way to do it.

var vue1 = new Vue({
    el: '#id1',
    data: {
        'name': 'Vue name'
    },
    methods: {

    },
    delimiters: ["[[", "]]"],
});


var vue2 = new Vue({
    el: '#id2',
    data: {

    },
    methods: {
        func1:function (name) {
            // Here i want to set vue1.name=name
            vue1.name=name;
        }
    },
    delimiters: ["[[", "]]"],
});

I have seen a function setData() but I dont know how to use it and if this is the correct scenario for that function.

Yom T. · Accepted Answer · 2020-05-25 18:16:55Z

1

I would add a method on the component itself for that purpose.

var vue1 = new Vue({
  el: '#id1',
  data: () => ({
    name: 'Vue name'
  }),
  methods: {
    changeName(name) {
      this.name = name;
    }
  },
  delimiters: ["[[", "]]"],
});

var vue2 = new Vue({
  el: '#id2',
  computed: {
    input: {
      get: () => vue1.name,
      set: vue1.changeName
    }
  },
  delimiters: ["[[", "]]"]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div>
  <div id="id1">
    <h2>[[$el.id]]</h2>
    [[name]]
  </div>

  <div id="id2">
    <h2>[[$el.id]]</h2>
    <input v-model="input" />
  </div>
</div>

answered May 25, 2020 at 18:16

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

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

Comments

Circuit Breaker · Accepted Answer · 2020-05-25 17:55:51Z

0

You can use a store pattern. For simple solution, you can use the following.

Store stores the shared values.

var store = {
    state: {
       name: null
    },
    setName: function(val) {
       this.state.name = val;
    },
};

How to access (or set) shared values from vue.

var vue1 = new Vue({
    el: '#id1',
    data: {
        sharedState: store.state,
        otherValue: 'some value'
    },
    methods: {
        set: function() {
            store.setName('John Doe');
            console.log(this.sharedState.name); // John Doe
        }
    },
});

answered May 25, 2020 at 17:55

Circuit Breaker

4,0184 gold badges20 silver badges21 bronze badges

Comments

Md Rathik · Accepted Answer · 2020-05-25 17:56:23Z

0

here is that way you can use data from one VUE instance to another Vue Instance . Using instance name with $data to catch the data , like app.$data.message . where i want to use first instance data to second app instance

var app = new Vue({
  el: '#app',
  data: {
    message: 'first vue app message'
  }
})


var app2 = new Vue({
  el: '#app2',
  data: {
    message: app.$data.message
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}
</div>

<div id="app2">
  {{ message }}
</div>

answered May 25, 2020 at 17:56

Md Rathik

862 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to set data for vue variable

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