O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Updating the filter query

To emit the query field, we are going to use a new Vue key that we have not used before, called watch. The watch function tracks a data property and can run methods based on the output. The other thing it is able to do is to emit events. As both, our text field and radio buttons are set to update the field.query variable, we will create a new watch function on this.

Create a new watch object after the methods on your component:

      watch: {        'filter.query': function() {        }      }

The key is the variable you wish to watch. As ours contains a dot, it needs to be wrapped in quotes. Within this function, create a new $emit event of change-filter-query that outputs the value of filter.query:

     watch: { 'filter.query': function() ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required