Practicing Vue.js for beginners (P6)

Tram Ho

This is the end of the vuejs practice.
Today we will address two important concepts watchers and input bindings .
Let’s start!


I created a label and a basic form with the input tag. The result is then a response . Inside the Vue instance, I initialized two local properties, favoriteGame and response . Note that this time we are using data () as a function with the return syntax, otherwise the v-model model will not work. The idea here is that we first want to store whatever the user enters in the <input> field into a variable, that way we can use it later at the appropriate time. In vanilla JS or even jQuery, you can try to retrieve the input value by $ (‘input’) or document.querySelector, but in Vue, we have a much simpler way. That is the v-model.

Introducing v-model

As you learned before, everything begins with v- a Vue directive . What the model v translates into, in simple terms, is:

Now let’s try this, go to the <input> declaration and add the directive v to it.

Now do and run in your browser and enter something into the input box. Taaaaa … da?
Ok, although nothing seems to be going on. Go ahead and open your Vue devtools and check the data of the <Root> element. YEAH.
Now go to dev tools and change the FavoritesGame value to something else (don’t forget to quote it, we need a string here)
Behind the v-model is actually setting a v-bind: value and v-on: input constraints, but going into this is a bit out of scope so I’ll drop you a link if you interested in it Using-v-model-on-Components


Now that we know two-way binding v-model, let’s try doing something with it

You have learned that with a prop state data , you can put it in a template with {{FavoritesGame}}, so there’s no need to say that again. You have learned how to use it in a method and computed with prop this.favoriteGame – so no need to do it again. But what happens when you want to “listen” or “react” with this property actually be modified?

Computed properties are great for recalculating the tools and returning a value, but if we want to modify another state on our application when this value changes, or even has What about making an asynchronous request? Under appropriate circumstances watchers come to help us.

Let’s add a copy to create a watcher prop

Watchers are defined inside a watch property in my instance or component and I pass to it an object that will include an attribute for each props we want to watch.

Put simply, every prop data or props prop you want to watch / react to needs to go inside the watch: {} with its name. So if your prop is named favoriteGame that’s the name of your function.

Each of these functions has two parameters passed to it, the first one will be the newValue that this prop receives, and the second one is the oldValue that it had before changing.

Check console.log and refresh your browser window. Try typing something into <input> and checking your console output. Whenever prop favoriteGame changes in any way, the watcher will be activated.

Now really do something new with it. Remember my response? Let’s do something fun depending on the user’s answer.

In case you didn’t know, indexOf is for checking the string and returns, -1 in case there is no match and if it does, it will return the position of the string you are looking for in that string.

I hope you can see the power of watched properties, I find it useful in case my properties change and I need to practice programming for it (with ajax calls, external functions, price updates value second, etc.), then using watchers is usually a good way. For other cases, use computed properties.


Now that you have the basic tools to really build a really interesting and functional application in Vue, I guarantee it. However, there is still a lot to learn and a lot to explore so you can squeeze every single juice out of this framework.

Thank you for reading! ♥

Share the news now

Source : Viblo