Vue.js how to define methods on the instance

Question

Hi I am trying to add json data to an element. I get the data via a jsonp call to an external API. but somehow vue does not recognize that the variable is there. Since the app is in laravel I read on laracasts forum that the data and methods properties should be defined in components, but that does not also solve my problem. I am using vue.js2 and laravel 5.4 I get the following error:

app.js: [Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

here is my code:

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 template

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

Bert · Accepted Answer · 2017-06-08 16:29:36Z

You are trying to reference the names property in your parent template, but names is a property of your component.

However, there is no need for a component here. Obviously you could use a component, but in that case you would need to move the template that references names down into the component. Instead, here I am removing the component.

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

And your template

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

unfortunately after changing my code like this I still get the same error

Imi · Accepted Answer · 2017-06-09 11:21:23Z

0

I found out what was going wrong. I should have wrapped the data, methods, and mounted properties into export default {}. This way it works fine now.

answered Jun 9, 2017 at 11:21

Imi

5492 gold badges10 silver badges25 bronze badges

1 Comment

Bert Over a year ago

That wasn't the only thing wrong. You still could not reference a data property defined in the child from the parent.

Collectives™ on Stack Overflow

Vue.js how to define methods on the instance

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related