Category: Vue

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.

Sometimes, we want to bind method result to v-model with Vue.js.

In this article, we’ll look at how to bind method result to v-model with Vue.js.

How to bind method result to v-model with Vue.js?

To bind method result to v-model with Vue.js, we can put the logic in a computed property.

For instance, we write

<template>
  <div id="app">
    <input v-model="doubleValue" />
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return { value: 5 };
  },
  computed: {
    doubleValue: {
      get() {
        return this.value * 2;
      },
      set(newVal) {
        this.value = newVal / 2;
      },
    },
  },
  //...
};
</script>

to add the doubleValue computed property which has a getter and a setter.

In the get getter, we return this.value multiplied by 2.

And in the set setter, we set this.value to newVal divided by 2.

And then we use that with v-model to bind doubleValue to the input value.

Conclusion

To bind method result to v-model with Vue.js, we can put the logic in a computed property.

Sometimes, we want to call a function as soon as the cursor moves from one text box to next in Vue.js.

In this article, we’ll look at how to call a function as soon as the cursor moves from one text box to next in Vue.js.

How to call a function as soon as the cursor moves from one text box to next in Vue.js?

To call a function as soon as the cursor moves from one text box to next in Vue.js, we can listen to the blur event.

For instance, we write

<template>
  <div id="app">
    <input @blur="handleBlur" placeholder="first name" />
    <input @blur="handleBlur" placeholder="last name" />
  </div>
</template>

to listen to the blur event and run the handleBlur method if the event is triggered with

@blur="handleBlur" 

Conclusion

To call a function as soon as the cursor moves from one text box to next in Vue.js, we can listen to the blur event.