Establishing a default v-on event for a Vue component

Question

Establishing a default v-on event for a Vue component

Within my custom 'text-input' components, I include some default markup and an 'input' element.

An effective method for passing the value of the 'text-input' to its parent is by emitting an event when the value changes.

To handle and capture this emitted value, I currently use a v-on directive for each text-input component:

<text-input v-on:valueUpdated="storeInputValue" name='name'></text-input>
<text-input v-on:valueUpdated="storeInputValue" name='email'></text-input>
<text-input v-on:valueUpdated="storeInputValue" name='phone'></text-input>

However, I find this approach repetitive and am exploring the possibility of having the v-on listener directly within the component template itself:

<template v-on:valueUpdated="storeInputValue">
    ...
</template>

This way, a 'default' v-on listener would be set for the component every time it is used.

javascript vue.js

Answer 1

Answer №1

If you want to utilize v-model on custom components, it's totally possible.

HTML Example:

<div id="app>
    <text-input v-model="user.name" name="'name'"></text-input>
    <text-input v-model="user.email" name="'email'"></text-input>
    <text-input v-model="user.phone" name="'phone'"></text-input>
    <h4>{{user}}</h4>
</div>

Script Implementation:

Vue.component('text-input', {
        name: 'text-input',
        template: `
        <div>
            <label>{{name}}</label>
            <input type="text" :value="value" @input="storeInputValue($event.target.value)" />
        </div>
        `,
        props: ['value', 'name'],
        methods: {
            storeInputValue(value){
                this.$emit('input', value);
            }
        }
    });
    
    //parent component
    new Vue({
        el: '#app',
        data: {
            user: {
                name: '',
                email: '',
                phone: ''
            }
        }
    });

You can check out the live example in this fiddle link.

Answer 2

If you want to utilize v-model on custom components, it's totally possible.

HTML Example:

<div id="app>
    <text-input v-model="user.name" name="'name'"></text-input>
    <text-input v-model="user.email" name="'email'"></text-input>
    <text-input v-model="user.phone" name="'phone'"></text-input>
    <h4>{{user}}</h4>
</div>

Script Implementation:

Vue.component('text-input', {
        name: 'text-input',
        template: `
        <div>
            <label>{{name}}</label>
            <input type="text" :value="value" @input="storeInputValue($event.target.value)" />
        </div>
        `,
        props: ['value', 'name'],
        methods: {
            storeInputValue(value){
                this.$emit('input', value);
            }
        }
    });
    
    //parent component
    new Vue({
        el: '#app',
        data: {
            user: {
                name: '',
                email: '',
                phone: ''
            }
        }
    });

You can check out the live example in this fiddle link.

Establishing a default v-on event for a Vue component

Answer №1

Similar questions

What is the process for creating a unit test case for a button's onClick event with Jest?

Struggling with NodeJs POST request issue

Is there a way to make Firebase Cloud Functions utilize ESLint?

Accessing JSON data model from Ember route or controller

What are the steps for integrating Landbot into a Next.js application?

What is the best way to break down my node module into separate files?

What is a more streamlined approach to creating a series of methods and functions that alter a single variable consecutively?

One method for routing pages in React Router is to have a shared component that is displayed on multiple pages, as well as a

You must use the 'new' keyword in order to invoke the class constructor

Is it possible for a Vue Boolean prop to be true if present and false if absent?

Managing array elements in React: removing and duplicating items

Using Node.js to efficiently parse JSON data into customizable PUG templates

What could be causing the lack of updates for a watched object in vue?

Show Angular if it is in the array

AngularJS - Unusual outcomes observed while utilizing $watch on a variable from an external AngularJS service

Using React in ES5 to create a button that triggers two separate functions with a

When I try to run Parcel, my ReactJS website just won't deploy in a serverless environment

Leverage axios over fetch calls within Workbox

The nodemailer module in Node.js encountered an issue while trying to send an email, resulting

Tips for deactivating dates in the jquery datepicker that correspond to entries in a MySQL database