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

标签 javascript laravel vue.js vuejs2 laravel-5.4

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

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

这是我的代码:

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/

相关文章:

javascript - jQuery.parseJSON() 的反向操作是什么?

javascript - 唯一选择选项值

javascript - 如何使用HTML中的开关通过onchange更改BACK

javascript - 单元测试包含带有插槽的 Vuetify 数据表的 Vue 组件

javascript - 在动态单选按钮中仅选择一个

php - 在 Laravel 的 Homestead 中运行 PHPUnit

php - 当主键为 varchar 时,无法从 Laravel 的 Eloquent 中检索列值

php - Laravel +存储过程:错误数据包乱序

javascript - 嵌套组件无法正确重新渲染:VueJs

javascript - Vuetify,如何设置默认 Prop