Category: Vue

Sometimes, we want to watch store values from Vuex.

In this article, we’ll look at how to watch store values from Vuex.

How to watch store values from Vuex?

To watch store values from Vuex, we can add a watcher in our component to watch the store value.

For instance, we write

<script>
//...
export default {
  watch: {
    "$store.state.drawer"(val) {
      console.log(val);
    },
  },
};
</script>

to watch the $store.state.drawer value in our component by setting '$store.state.drawer' to a function with the val parameter.

We get the latest value of the $store.state.drawer property from the val parameter.

Conclusion

To watch store values from Vuex, we can add a watcher in our component to watch the store value.

Sometimes, we want to pass data from child to parent in Vue.js.

In this article, we’ll look at how to pass data from child to parent in Vue.js.

How to pass data from child to parent in Vue.js?

To pass data from child to parent in Vue.js, we should emit an event from the child component to the parent component.

For instance, we write

this.$emit("eventname", this.variable);

to call this.$emit with the event name and the variables we want to emit to the parent.

Then in the parent component, we write

<template>
  <child-component @eventname="updateParent"></child-component>
</template>

<script>
export default {
  //...
  methods: {
    updateParent(variable) {
      this.parentvariable = variable;
    },
  },
  //...
};
</script>

to add the child-component in our parent component’s template.

And we listen for the eventname event and call updateParent when the eventname event is emitted.

We get this.variable that we called this.$emit with from the variable parameter of updateParent.

Conclusion

To pass data from child to parent in Vue.js, we should emit an event from the child component to the parent component.

Sometimes, we want to fix Vue v-on:click not working on a component

In this article, we’ll look at how to fix Vue v-on:click not working on a component.

How to fix Vue v-on:click not working on a component?

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.

For instance, we write

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

to set @click.native to testFunction to call testFunction with a click is done on anything in the test component.

Conclusion

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.

Sometimes, we want to call a Vue.js component method from outside the component.

In this article, we’ll look at how to call a Vue.js component method from outside the component.

How to call a Vue.js component method from outside the component?

To call a Vue.js component method from outside the component, we can assign a ref to our component and then we can call the component’s method with it.

For instance, we write

<template>
  <my-component ref="foo"></my-component>
</template>

<script>
//...
export default {
  //...
  components: { "my-component": myComponent },
  methods: {
    doSomething() {
      this.$refs.foo.doSomething();
    },
  },
  //...
};
</script>

to assign the foo ref to my-component.

Then we call this.$refs.foo.doSomething(); in the doSomething method where this.$refs.foo references the my-component component instance.

Conclusion

To call a Vue.js component method from outside the component, we can assign a ref to our component and then we can call the component’s method with it.

In this article, we’ll look the difference between v-model and v-bind in Vue.js.

What’s the difference between v-model and v-bind in Vue.js?

The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.

v-model is the combination of v-bind:value and the input event.

For instance,

<template>
  <input v-model="something" />
</template>

//...

is the same as

<template>
  <input
    v-bind:value="something"
    v-on:input="something = $event.target.value"
  />
</template>

//...

or

<input
   :value="something"
   @input="something = $event.target.value"
>

for short.

: is the shorthand for v-bind and @ is the shorthand for v-on:input.

Conclusion

The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.

v-model is the combination of v-bind:value and the input event.