How to send data to component in vue js?

Question

How do I send data to a component in Vue.js? I got a response from the server on the button click event, and now I want to send this response to the component and display on list using v-for.

Here is my code:

var store = new Vuex.Store({
    state: {
        Item: []
    },
    mutations: {
        getItems: function (state) {

        }

    },
    actions: {
        fetchData:function (context) {
           Vue.http.get('data.json').then(function(response){
             alert('dd')
}, function(error){
    console.log(error.statusText);
});

        }
    }
})

var httprequest = Vue.extend({
    "template": '#http_template',
    data: function () {
        return {
            items: store.state.Item
        }
    },
    methods: {
        fetchData: function () {
          store.dispatch('fetchData')
        },

    }
})

Vue.component('httprequest', httprequest);

var app = new Vue({
    el: '#App',
    data: {},


});

Possible duplicate of how to share data between components in VUE js (while creating list) — bbsimonbb
– bbsimonbb, Commented Sep 3, 2017 at 17:04

Pradeepb · Accepted Answer · 2017-09-03 22:27:09Z

1

You have almost done everything correct. Only thing you are missing is after getting data, you are not assigning it to state.Item. Please check the below code:

var store = new Vuex.Store({
    state: {
      Item: []
    },
    mutations: {
      getItems: function(state, items) {
        items.forEach(function(item) {
          state.Item.push(item)
        })
      }
    },
    actions: {
      fetchData: function(context) {
        Vue.http.get('data.json').then(function(response) {
          context.commit('getItems', response.data)
        }, function(error) {
          console.log(error.statusText);
        });
      }
    }
  })

working example can be found here.

answered Sep 3, 2017 at 22:27

Pradeepb

2,5723 gold badges28 silver badges48 bronze badges

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

Comments

bbsimonbb · Accepted Answer · 2017-09-04 07:13:48Z

1

You don't send data to components. You set up reactive pipes and the data moves around when it needs to. In your case, with vuex, you want to register store.state.items on the data of your component.

You can use a prop if you want, but you still need to do the registration in the parent's data. If your component is a singleton, intended for this page only, you're better registering what you need directly in the data of the component.

edited Sep 4, 2017 at 7:13

answered Sep 3, 2017 at 18:30

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 04:41:35Z

1

In general vue follows the principle that data goes the DOM tree down via properties and up via events. See for example https://v2.vuejs.org/v2/guide/index.html#Composing-with-Components.

Thus to get data into your component define a property myProp inside your component and when using your component bind it via v-bind:myProp="myData".

To get data back from your component use this.$emit('myUpdateEvent', myUpdatedData) and listen to the event by using v-on:myUpdateEvent="myUpdateHandler".

edited Jul 15, 2022 at 4:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 3, 2017 at 17:11

B M

4,0893 gold badges36 silver badges49 bronze badges

3 Comments

naveen Over a year ago

please remove this anwser .I am using vuex not emit

naveen Over a year ago

please check my plunker.I am not using emit or broadcast

B M Over a year ago

The principles I am pointing out are very much relevant for your use case: if you have a generic list component you would not want to bind Vuex data directly inside it, but instead bind it to the parent component and pass it to the list as property as explained.

Collectives™ on Stack Overflow

How to send data to component in vue js?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related