javascript - Vue.js 如何在实例上定义方法

Question

嗨，我正在尝试将 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>

Answer 1

您正在尝试引用父模板中的 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>