Category: JavaScript

Sometimes, we want to make the v-container full width with Vuetify.

In this article, we’ll look at how to make the v-container full width with Vuetify.

How to make the v-container full width with Vuetify?

To make the v-container full width with Vuetify, we just add the fluid prop.

For instance, we write

<template>
  <v-content class="yellow">
    <v-container fluid>
      <v-layout>
        <router-view></router-view>
      </v-layout>
    </v-container>
  </v-content>
</template>

to add the fluid prop to the v-container to make it fill the width of the v-content component.

Conclusion

To make the v-container full width with Vuetify, we just add the fluid prop.

Sometimes, we want to access props in mounted function with Vue.js.

In this article, we’ll look at how to access props in mounted function with Vue.js.

How to access props in mounted function with Vue.js?

To access props in mounted function with Vue.js, we can get the value from this.

For instance, we write

<script>
//...
export default {
  //...
  props: ["subscriptions"],
  async mounted() {
    await this.$nextTick();
    console.log(this.subscriptions);
  },
  //...
};
</script>

to register the subscriptions prop with

props: ["subscriptions"]

Then we get the subscriptions prop value in the mounted hook with

this.subscriptions

Sometimes, we want to apply filter on v-model in an input field with Vue.js.

In this article, we’ll look at how to apply filter on v-model in an input field with Vue.js.

How to apply filter on v-model in an input field with Vue.js?

To apply filter on v-model in an input field with Vue.js, we replace v-model with the value prop and listen to the input event.

For instance, we write

<template>
  <div id="app">
    <input :value="date | myDate" @input="date = $event.target.value" />
  </div>
</template>

to set the value prop to the value returned by the myDate filter with date as its argument.

Then we listen for the input event and set the date value to $event.target.value when we change the input value.

Conclusion

To apply filter on v-model in an input field with Vue.js, we replace v-model with the value prop and listen to the input event.

Sometimes, we want to install Vue.js in Laravel 8.

In this articlel, we’ll look at how to install Vue.js in Laravel 8.

How to install Vue.js in Laravel 8?

To install Vue.js in Laravel 8, we need to run a few commands.

First, we run

composer require laravel/ui

to add the larevel/ui` package.

Then we add Vue.js into our project with

php artisan ui vue

If we want to add auth with our Laravel Vue project, we run

php artisan ui vue --auth

Finally, we run

npm install

to install the Vue packages.

And then we run

npm run dev

to start the Vue project.

Conclusion

To install Vue.js in Laravel 8, we need to run a few commands.

Sometimes, we want to get $children by component name with Vue.js.

In this article, we’ll look at how to get $children by component name with Vue.js.

How to get $children by component name with Vue.js?

To get $children by component name with Vue.js, we can call find on this.$root.$children.

For instance, we write

this.$root.$children.find((child) => {
  return child.$options.name === "name";
});

to find the child component with the name option set to 'name'.

Conclusion

To get $children by component name with Vue.js, we can call find on this.$root.$children.