嗨,我正在尝试将 json 数据添加到元素中。我通过 jsonp 调用外部 API 获取数据。但不知何故,vue 无法识别该变量的存在。由于该应用程序位于 laravel 中,我在 laracasts 论坛上读到,数据和方法属性应该 be defined in components ,但这并不能解决我的问题。我正在使用 vue.js2 和 laravel 5.4 我收到以下错误:
app.js:[Vue warn]:属性或方法“名称”未在实例上定义,但在渲染期间引用。确保在数据选项中声明响应式(Reactive)数据属性。
这是我的代码:
app.js
Vue.component('search',
{
template: '<div class="panel-heading" ></div>',
data: function(){
return {
names: []
}
},
methods: {
getData: function(){
var self = this;
// GET request
this.$http.jsonp(url,
{
jsonpCallback: "JSON_CALLBACK"
})
.then(
response=>{
this.names = response.body
})}
}
});
const app = new Vue({
el: '#search'
});
Blade 模板
<div id='search'>
<search v-for='name in names'>
@{{name.label.eng}}
</search>
</div>
最佳答案
您正在尝试引用父模板中的 names
属性,但 names
是组件的属性。
但是,这里不需要组件。显然,您可以使用组件,但在这种情况下,您需要将引用names
的模板向下移动到组件中。相反,我在这里删除该组件。
const app = new Vue({
el: '#search',
data:{
names: []
},
methods: {
getData(){
this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"})
.then(response => this.names = response.body)
}
},
mounted(){
this.getData()
}
});
还有你的模板
<div id='search'>
<div v-for='name in names' class="panel-heading">
@{{name.label.eng}}
</div>
</div>
关于javascript - Vue.js 如何在实例上定义方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44440724/