Category: Vue Answers

Sometimes, we want to watch props change with Vue Composition API and Vue 3.

In this article, we’ll look at how to watch props change with Vue Composition API and Vue 3.

How to watch props change with Vue Composition API and Vue 3?

To watch props change with Vue Composition API and Vue 3, we can use the watch function.

For instance, we write

watch(() => props.selected, (selection, prevSelection) => { 
   /* ... */ 
})

to call watch to watch the selected prop.

We get the latest and previous value of it from the parameters in the 3rd argument.

Also, we can also put the prop in a ref and watch the ref with

const selected = ref(props.selected);

watch(selected, (selection, prevSelection) => {
  /* ... */
});

And we can watch multiple refs with

watch([ref1, ref2], ([refVal1, refVal2], [prevRef1, prevRef2]) => {
  /* ... */
});

Conclusion

To watch props change with Vue Composition API and Vue 3, we can use the watch function.

Sometimes, we want to center content vertically on Vuetify.

In this article, we’ll look at how to center content vertically on Vuetify.

How to center content vertically on Vuetify?

To center content vertically on Vuetify, we can use the align and justify props.

For instance, we write

<template>
  <v-container fill-height fluid>
    <v-row align="center" justify="center">
      <v-col></v-col>
    </v-row>
  </v-container>
</template>

to set the align and justify props to set the align-items and justify-content CSS properties respectivelt on the v-row.

Since align is set to center, the content should be vertically centered.

Conclusion

To center content vertically on Vuetify, we can use the align and justify props.

Sometimes, we want to get the DOM element to corresponding Vue.js component with JavaScript.

In this article, we’ll look at how to get the DOM element to corresponding Vue.js component with JavaScript.

How to get the DOM element to corresponding Vue.js component with JavaScript?

To get the DOM element to corresponding Vue.js component with JavaScript, we can use refs.

For instance, we write

<template>
  <div>
    root element
    <div ref="childElement">child element</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const rootElement = this.$el;
    const childElement = this.$refs.childElement;

    console.log(rootElement);
    console.log(childElement);
  },
};
</script>

to assign the childElement ref to the div.

Then in the mounted hook, we get the root element of the component with this.$el.

And we get the div with this.$refs.childElement.

Conclusion

To get the DOM element to corresponding Vue.js component with JavaScript, we can use refs.

Sometimes, we want to add a Vue Vuex getter with argument.

In this article, we’ll look at how to add a Vue Vuex getter with argument.

How to add a Vue Vuex getter with argument?

To add a Vue Vuex getter with argument, we can add a getter function that returns a function that takes the arguments.

For instance, we write

new Vuex.Store({
  getters: {
    someMethod: (state) => (id) => {
      return state.things.find((thing) => thing.id === id);
    },
  },
});

to create a Vuex store with the someMethod getter that returns a function that takes the id parameter.

Then we call someMethod with the id we want.

Conclusion

To add a Vue Vuex getter with argument, we can add a getter function that returns a function that takes the arguments.

Sometimes, we want to call parent method with component with Vue.js.

In this article, we’ll look at how to call parent method with component with Vue.js.

How to call parent method with component with Vue.js?

To call parent method with component with Vue.js, we can get the parent component’s method from the $parent property.

For instance, we write

<script src="https://unpkg.com/vue"></script>

<template id="child-template">
  <span @click="someMethod">Click me!</span>
</template>

<div id="app">
  <child></child>
</div>

<script>
  Vue.component("child", {
    template: "#child-template",
    methods: {
      someMethod() {
        this.$parent.someMethod();
      },
    },
  });

  const app = new Vue({
    el: "#app",
    methods: {
      someMethod() {
        console.log("parent");
      },
    },
  });
</script>

to define the child component with Vue.component.

In it, we add the someMethod method that calls this.$parent.someMethod.

this.$parent.someMethod is the parent component’s someMethod method.

Therefore, when we click the span, we see 'parent' logged.

Conclusion

To call parent method with component with Vue.js, we can get the parent component’s method from the $parent property.