CODEWITHSUNDEEP
javascriptvue.js
jpsc
jpsc

Reputation: 51

Watch for data change

I'm currently struggling with the Vue instance concept. I'm using the vue-loader with webpack and created a vue component 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 component: 

export default {
    data: function() {
        return {
            results: 'current results'
        }
    }
}

I want trigger and event from inside of the component (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 component like:

const vm = new Vue({
   el: 'search',
   data: {index: 1},
   render: h => h(search)
});

Index is also not available inside of the component to use.

How do I fix this?

Upvotes: 3

Views: 23096

Answers (2)

fweidemann14
fweidemann14

Reputation: 1973

You can easily use watchers here. But first, let me show you how you can use data inside of your components. So basically, if you define data in Vue instances, you have them available there. But you want to pass them to your components. Here's where props come in handy.

https://v2.vuejs.org/v2/guide/components.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 come from outside. So, you can do this by defining what you expect to be given towards your component by addingprops like so:

export default {
  props: ['index'],
  data: function() {
    return {
        results: 'current results'
    }
  }
}

Now, you just have to pass it to your component whenever you use it. Let's say you give your component a name attribute like this: name: test-element and your component 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 component inside of your parent with import TestElement from './TestElement.vue' - again, your path may be different!

Now, you register your component in your Vue instance by using components: {'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 component!

Now you just bind your value to the prop which is then being passed to your component 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 component where you can use it, for example in your template, to do calculations, whatever you want!

Now your question about watchers: inside of your component, 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 ;)

Upvotes: 10

jpsc
jpsc

Reputation: 51

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 precompile .vue with vue-loader.

Upvotes: 2

Related Questions