场景
给组件传递参数设置
props : ['question_lists'],
.getJson获取到了questionlists的数据在 . g e t J s o n 获 取 到 了 q u e s t i o n l i s t s 的 数 据 在 .getJson的的回调函数中 自然需要将得到的数据赋值给question_lists
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "question_lists"
分析
1. 翻译: 避免直接修改prop属性, 因为父级在重新加载的时候 prop也会被复写
2. Vue从1.x升级到2.x之后 就不推荐组件内直接修改 推荐使用data 或者computed来解决
其实只需要在组件内部data 声明一个空的属性就可以了
参考文档
https://cn.vuejs.org/v2/guide/migration.html#%E4%BF%AE%E6%94%B9-Props-%E5%BC%83%E7%94%A8
解决
<script>
Vue.component('list_question_template', {
template : '#list_question',
// props : ['question_lists'],
data : function(){
return {
question_lists : {}
}
},
created : function () {
var vm = this;
var url = '/api/test';
$.getJSON(url).done(function(response){
vm.question_lists = response;
});
},
methods : {
deleteItem : function (question) {
var index = this.question_lists.indexOf(question);
this.question_lists.splice(index, 1)
}
}
});
new Vue({
el: '#app_test'
});
</script>