If you want to utilize watchers in this scenario, let me guide you through the process of incorporating data into your components effectively.
By defining data within Vue instances, you can access them accordingly. However, if you aim to pass this data to your components, you can leverage the functionality of props.
To understand more about this concept, visit: https://v2.vuejs.org/v2/guide/components.html#Props
The key aspect here is having a child component similar to yours...
export default {
data: function() {
return {
results: 'current results'
}
}
... and you need to make certain values accessible from external sources for use within the component. This can be achieved by specifying the expected input using props, as demonstrated below:
export default {
props: ['index'],
data: function() {
return {
results: 'current results'
}
}
Subsequently, you simply have to pass these values to your component when implementing it. For instance, by assigning a name attribute such as name: test-element and storing the component in a file named TestElement.vue (modifiable per your preference).
Following this, import your component into its parent using
import TestElement from './TestElement.vue'
. Accordingly, register the component within your Vue instance utilizing
components: {'test-element': TestElement}
.
This setup enables you to integrate an HTML tag <test-element> in your current file, rendering the specified content from your component seamlessly.
You can then bind values to the prop which will subsequently be passed on to the component like so:
<test-element :index="index"></test-element>
This approach ensures that the value of index originating from the parent Vue instance is transferred to the child component for further utilization, such as calculations or other functionalities within the template.
In terms of watchers, you can implement one within your component using the following method...
export default {
props: ['index'],
data: function() {
return {
results: 'current results',
index: this.index // utilizing the prop provided!
}
},
watch: {
index: function (newValue, oldValue) {
// perform actions based on the changing value
}
}
}
That sums up the essence of it all! Apologies for the lengthiness, but I trust this information serves your needs adequately ;)