I'm currently struggling with the Vue instance concept. I'm using the vue-loader with webpack and created a vue ponent that I'm importing.
import Vue from 'vue';
import Search from '../Search.vue';
const vm = new Vue({
el: 'search',
render: h => h(search)
});
On the ponent:
export default {
data: function() {
return {
results: 'current results'
}
}
}
I want trigger and event from inside of the ponent (on a property change) that I can watch from the instance.
Using the API should be something like this:
vm.$watch('results', function (newVal, oldVal) {
// do something
})
But I does not trigger anything.
I think I'm missing to understand how to use the Vue instance because I can't also add any data on initialization of the instance that is accessible on the ponent like:
const vm = new Vue({
el: 'search',
data: {index: 1},
render: h => h(search)
});
Index is also not available inside of the ponent to use.
How do I fix this?
I'm currently struggling with the Vue instance concept. I'm using the vue-loader with webpack and created a vue ponent that I'm importing.
import Vue from 'vue';
import Search from '../Search.vue';
const vm = new Vue({
el: 'search',
render: h => h(search)
});
On the ponent:
export default {
data: function() {
return {
results: 'current results'
}
}
}
I want trigger and event from inside of the ponent (on a property change) that I can watch from the instance.
Using the API should be something like this:
vm.$watch('results', function (newVal, oldVal) {
// do something
})
But I does not trigger anything.
I think I'm missing to understand how to use the Vue instance because I can't also add any data on initialization of the instance that is accessible on the ponent like:
const vm = new Vue({
el: 'search',
data: {index: 1},
render: h => h(search)
});
Index is also not available inside of the ponent to use.
How do I fix this?
Share Improve this question edited Sep 5, 2017 at 8:35 jpsc asked Sep 5, 2017 at 7:36 jpscjpsc 511 gold badge1 silver badge4 bronze badges2 Answers
Reset to default 10You can easily use watchers here.
But first, let me show you how you can use data inside of your ponents.
So basically, if you define data in Vue instances, you have them available there. But you want to pass them to your ponents. Here's where props e in handy.
https://v2.vuejs/v2/guide/ponents.html#Props
Basically, the important part here is that you have a child like yours...
export default {
data: function() {
return {
results: 'current results'
}
}
}
... and you want to make some kind of value available to use inside it, which is supposed to e from outside. So, you can do this by defining what you expect to be given towards your ponent by addingprops like so:
export default {
props: ['index'],
data: function() {
return {
results: 'current results'
}
}
}
Now, you just have to pass it to your ponent whenever you use it.
Let's say you give your ponent a name attribute like this: name: test-element and your ponent sits in an own file called TestElement.vue -
obviously you can change that to whatever you want, but let's stick with it for now.
Then you can import your ponent inside of your parent with import TestElement from './TestElement.vue' - again, your path may be different!
Now, you register your ponent in your Vue instance by using ponents: {'test-element': TestElement}.
This enables you to use an HTML tag <test-element> inside your current file which will then render whatever you defined inside of your ponent!
Now you just bind your value to the prop which is then being passed to your ponent like so: <test-element :index="index"></test-element>
And that is it! Now the value of index defined in your parent's Vue instance is being passed to your child ponent where you can use it, for example in your template, to do calculations, whatever you want!
Now your question about watchers: inside of your ponent, register a watcher like so...
export default {
props: ['index'],
data: function() {
return {
results: 'current results',
index: this.index // here we are using your prop!
}
},
watch: {
index: function (newValue, oldValue) {
// here you can do whatever you want
}
}
}
So that is basically it! Sorry if this was a little long, but I hope I could help you ;)
This is actually what I had to do.
const Search = Vue.extend(Search);
const vm = new Search({el: 'search'});
vm.$watch('results', function (newVal, oldVal) {
// do something
})
Now I can watch for changes on the properties from outside of the .vue file. This was an issue because I have a mix of .js and prepile .vue with vue-loader.