[英]How can I avoid objects reference issues in in Vue js 2 components?
I'm learning Vue and can't understand a thing.我正在学习 Vue,但什么都不懂。 I keep getting this error:我不断收到此错误:
Property or method "item" is not defined on the instance but referenced during render.属性或方法“项目”未在实例上定义,但在渲染期间被引用。 Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.通过初始化该属性,确保该属性是反应性的,无论是在数据选项中,还是对于基于类的组件。 See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.请参阅: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
Obviously I read the article and thought about my code, but since I'm using Vue's push() method (which should do the thing), still I cann't understand why it doesn't work.显然我阅读了这篇文章并考虑了我的代码,但是由于我使用的是 Vue 的 push() 方法(应该做的事情),我仍然不明白为什么它不起作用。 Can someone shed some lights on this please?有人可以对此有所了解吗?
I share some code below:我在下面分享一些代码:
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: 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>
The component template references item
but item
is not declared as a property anywhere in the component.组件模板引用item
,但item
未在组件中的任何位置声明为属性。
<h3 class="news-title news-component">{{ item.title.rendered }}</h3>
Instead, the component declares a newsdata
property.相反,该组件声明了一个newsdata
属性。 I expect what you want is this:我希望你想要的是这样的:
<h3 class="news-title news-component">{{ newsdata.title.rendered }}</h3>
Here's the code (slightly modified so the API call works).这是代码(稍作修改,以便 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/vue@2.4.2"></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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.