Question

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

app.js：[Vue warn]：属性或方法“names”未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

这是我的代码：

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>

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>

Answer 2

我发现了什么问题。我应该将数据，方法和已安装的属性包装到export default {}中。这样它现在工作正常。

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

2 个答案: