Wie sende ich Daten an die Komponente in vue js?

Question

Wie sende ich Daten an eine Komponente in Vue.js? Ich habe eine Antwort vom Server über das Klickereignis der Schaltfläche erhalten. Nun möchte ich diese Antwort an die Komponente senden und unter list mit v-for anzeigen.

Hier ist mein 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: {}, 


}); 

Answer 1

Sie haben fast alles richtig gemacht. Das Einzige, was Ihnen fehlt, ist, nachdem Sie die Daten erhalten haben, dass Sie sie nicht state.Item zuweisen. Bitte überprüfen Sie den Code unten:

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); 
     }); 
     } 
    } 
    }) 

Arbeitsbeispiel kann here finden.

Answer 2

Im allgemeinen vue folgt dem Prinzip, dass die Daten den DOM-Baum nach unten über Eigenschaften und bis über Ereignisse geht. Siehe zum Beispiel https://vuejs.org/v2/guide/index.html#Composing-with-Components.

Um also Daten in Ihre Komponente zu bekommen, definieren Sie eine Eigenschaft myProp innerhalb Ihrer Komponente und binden Sie sie bei Verwendung Ihrer Komponente über v-bind:myProp="myData".

Um Daten von Ihrer Komponente zurück zu bekommen, verwenden Sie this.$emit('myUpdateEvent', myUpdatedData) und hören Sie das Ereignis mit v-on:myUpdateEvent="myUpdateHandler".

Answer 3

Sie senden keine Daten an Komponenten. Sie richten reaktive Pipes ein und die Daten werden bei Bedarf verschoben. In Ihrem Fall möchten Sie mit vuex store.state.items für die Daten Ihrer Komponente registrieren.

Sie können eine Requisite verwenden, wenn Sie möchten, aber Sie müssen immer noch die Registrierung in den Daten der Eltern vornehmen. Wenn es sich bei Ihrer Komponente um ein Singleton handelt, das nur für diese Seite vorgesehen ist, registrieren Sie das, was Sie benötigen, direkt in den Daten der Komponente.