如何避免Vue js 2组件中的对象引用问题?
问题描述:
我在学习Vue,无法理解一件事。我一直得到这个错误:如何避免Vue js 2组件中的对象引用问题?
属性或方法“item”没有在实例上定义,但在渲染过程中被引用。通过初始化属性,确保此属性在数据选项或基于类的组件中处于反应状态。参见:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
很显然,我阅读了文章并思考了我的代码,但由于我使用了Vue的push()方法(它应该这样做),我仍然无法理解它为什么不起作用。有人可以在这方面点亮一些灯吗?
我下面分享一些代码:
var maxpages = parseInt(rest_object.maxpages);
Vue.component('news-item', {
template: '#news-template'
,props:['newsdata']
})
var news_manager = new Vue({
el: '#more-news-box'
,data:{
page: 1
,add_more_button: null
,items: []
}
,mounted: function(){
this.add_more_button = $('button.add-more');
}
,methods: {
get_posts: function(){
this.page += 1;
if(this.page > maxpages) return false;
if(this.page == maxpages) this.add_more_button.prop('disabled','disabled').addClass('hidden');
$.ajax({
type: 'GET'
,dataType: 'json'
,url: rest_object.api_url
,data: { per_page: 3 ,page: this.page }
}).done(function(posts_objects) {
_.each(posts_objects, function(post){ this.items.push(post); }.bind(this));
}.bind(this));
}
}
});
HTML:
<div class="more-news-box" id="more-news-box">
<ul><li v-for="(item, index) in items" is="news-item" :key="index" :newsdata="item"></li></ul>
<button class="add-more" type="button" @click="get_posts">add more</button>
</div>
<script type="text/x-template" id="news-template">
<li>
<article class="news-article">
<figure class="news-figure"></figure>
<div class="news-date news-component"></div>
<h3 class="news-title news-component">{{ item.title.rendered }}</h3>
<div class="news-content news-component"></div>
</article>
</li>
</script>
答
分量模板引用item
但item
未声明为在任何地方组件的属性。
<h3 class="news-title news-component">{{ item.title.rendered }}</h3>
相反,组件声明一种newsdata
属性。我期望你想要的是这样的:
<h3 class="news-title news-component">{{ newsdata.title.rendered }}</h3>
下面是代码(稍微修改,以便API调用工作)。
console.clear()
var maxpages = 10
Vue.component('news-item', {
template: '#news-template'
,props:['newsdata']
})
var news_manager = new Vue({
el: '#more-news-box'
,data:{
page: 1
,add_more_button: null
,items: []
}
,mounted: function(){
this.add_more_button = $('button.add-more');
}
,methods: {
get_posts: function(){
this.page += 1;
if(this.page > maxpages) return false;
if(this.page == maxpages) this.add_more_button.prop('disabled','disabled').addClass('hidden');
$.ajax({
type: 'GET'
,dataType: 'json'
,url: "https://swapi.co/api/people"
,data: { per_page: 3 ,page: this.page }
}).done(function(posts_objects) {
console.log(posts_objects)
_.each(posts_objects.results, function(post){ this.items.push({title:{rendered:post.name}}); }.bind(this));
console.log(this.items)
}.bind(this));
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div class="more-news-box" id="more-news-box">
<ul><li v-for="(item, index) in items" is="news-item" :key="index" :newsdata="item"></li></ul>
<button class="add-more" type="button" @click="get_posts">add more</button>
</div>
<script type="text/x-template" id="news-template">
<li>
<article class="news-article">
<figure class="news-figure"></figure>
<div class="news-date news-component"></div>
<h3 class="news-title news-component">{{ newsdata.title.rendered }}</h3>
<div class="news-content news-component"></div>
</article>
</li>
</script>
好了,是的,在所有的事情是'{{newsdata.title.rendered}}',是解决这个问题。非常感谢你! – Stratboy