如何将数据发送到Vue.js中的组件?我在服务器上收到了按钮点击事件的回复,现在我想将此响应发送到组件并使用list
显示在v-for
上。
这是我的代码:
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: {},
});
答案 0 :(得分:1)
一般来说,vue遵循以下原则:数据通过属性向上传递DOM树,向上传递事件。请参阅示例https://vuejs.org/v2/guide/index.html#Composing-with-Components。
因此,要将数据导入组件,请在组件内定义属性myProp
,并在使用组件时通过v-bind:myProp="myData"
绑定它。
要从您的组件中取回数据,请使用this.$emit('myUpdateEvent', myUpdatedData)
并使用v-on:myUpdateEvent="myUpdateHandler"
收听该事件。
答案 1 :(得分:1)
您不会向组件发送数据。您设置了反应管道,数据在需要时移动。在您的情况下,使用vuex,您希望在组件的数据上注册store.state.items。
如果需要,您可以使用道具,但仍需要在父数据中进行注册。如果您的组件是单一的,仅适用于此页面,您可以更好地直接在组件数据中注册所需内容。
答案 2 :(得分:1)
你几乎把一切都做对了。您唯一缺少的是获取数据后,您没有将其分配给state.Item
。请检查以下代码:
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);
});
}
}
})
可以找到工作示例here。