Vue.js 如何在实例上定义方法答案

【问题标题】：Vue.js how to define methods on the instanceVue.js 如何在实例上定义方法
【发布时间】：2017-11-10 11:08:20
【问题描述】：

您好，我正在尝试将 json 数据添加到元素中。我通过对外部 API 的 jsonp 调用获取数据。但不知何故，vue 无法识别变量存在。由于该应用程序在 laravel 中，我在 laracasts 论坛上读到数据和方法属性应该be defined in components，但这也不能解决我的问题。我正在使用vue.js2 和laravel 5.4 我收到以下错误：

app.js：[Vue 警告]：属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

这是我的代码：

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'
});

刀片模板

<div id='search'>
<search v-for='name in names'>
@{{name.label.eng}}
</search>
</div>

【问题讨论】：

标签： javascript laravel vue.js vuejs2 laravel-5.4

【解决方案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>

【讨论】：

不幸的是，像这样更改我的代码后，我仍然遇到同样的错误

【解决方案2】：

我发现出了什么问题。我应该将数据、方法和挂载的属性包装到 export default {} 中。这样现在就可以正常使用了。

【讨论】：

这不是唯一的错误。您仍然无法从父级引用子级中定义的数据属性。