[Vuejs]-How to get variable value from a component and assign it to a variable in another component in vuejs

by

0👍

✅

If Vuex is too complicated for now, you can use the native $root when you need a simple way.

I use Vuex with name spaced modules it is brilliant but it is a large learning curve and the documentation is not really that great on it.

To leverage $root you could move regions to to the data attribute of your new Vue({}) instance and reference that from anywhere using this.$root.regions in script or $root.regions in template.

var app = new Vue({
  el: '#myForm',
  components: {
    vuejsDatepicker,
    regionsComponent,
  },
  data: function (){
    return {
        regions: []
    }
  }
})

getRegions: function() {

  ...

  axios.get(apiurl+'regions/all', {headers: headers}).then((res)=>{

    if(res.data.responseCode === "01"){
      this.$root.regions = res.data.data;
    } else {
      console.log("failed to load regions")
    }

  })
},

<select ... >
  <option value='' >Select region</option>
  <option v-for="region in $root.regions" :value="region.regionId">{{region.region}}</option>
</select>

This way any component at any nested level can access a global data set without any sharing faff.

this.$set($root.myGlobal, newValue); can also help out with any
reactivity issues in some cases.

0👍

You can use Vuex and have a global store to store your data

0👍

With Vuex you can share data/complex state management across components. A Vuex store instance is composed of state, getters, actions, and mutations. In summary, the state “holds” your data, you can retrieve it via your state or the getters. Actions can be async and for example can hold an API call, that later on, you can pass the data from the API call to a mutation that ultimately make the change effectively, mutations cannot be async.

See: The simplest store

All the operations made with Vuex have a trace of what is happening inside your app. It seems a little daunting at first, but actually, it is really easy to manage your data.

Leave a comment