[Vuejs]-Vue.JS functions in different instances

by

1👍

As the error said, the function onChangeChart() doesn’t exists. This is because the function is called in one instance #myapp and declared in another #chartapp.

Move that select to the template of #chartapp instance and the error will go, but I don’t think that’s what you want. Check the docs for vue components you will have a lot of problems if you continue with the idea of puting vue instances inside one another, it will be better if you start thinking in multiple components instead of multiple instances.

The best at this moment for your case, is to have the main instance with the select and to have a component rendering the chart, there are different ways on how you can make your component react to a change from outside. For example: you could hear the change on the select (as you already do) with a callback function; and from that function you can call a method inside the component, you could also emit a global event after the change and the component could hear that event or you could be using props and the component react to any change.

Note: If you are new to vue, you could be using Vue3 instead of Vue2, since you are starting you could use that as an advantage.

-1👍

its complaining that onChangeChart() is not a known function. This is how I do an axios call:

created(){
axios.get('https://jsonplaceholder.typicode.com/users/1/todos')
.then(response => {
this.myDataHolder = response.data[3];
console.log(response)
}).catch(error => {
  console.log(error);
})
},

Where this is placed after the method:{},

Leave a comment