What is the best way to set the `value` attribute and `v-model` attribute for a custom Vue component?

Question

What is the best way to set the `value` attribute and `v-model` attribute for a custom Vue component?

I am seeking to develop a unique Vue component that functions as a "radio div" - essentially, a div with the ability to act like a radio button where only one among multiple can be selected at a time. The div will also have a slot for including any desired content.

Typically, radio buttons in VueJS are structured as follows:

<input type="radio" name="name" value="value" v-model="variable" />

Based on this structure, I envisioned an API like this:

<div-radio name="name" value="value" v-model="variable" />

However, upon researching how to add v-model support to custom component, the first Google search result I came across suggested:

When using input elements, you can implement v-model in this manner:
<input v-model="email" />
The translation of v-model is explained as:
<input :value="email" @input="e => email = e.target.value" />

If v-model translates to :value and @input, it seems challenging to incorporate a prop named "value" alongside "v-model" simultaneously - despite the conventional functioning of VueJS radio buttons.

Could it be that I am misunderstanding the functionality of v-model? Are there alternative solutions available? Or is my desired outcome simply unattainable?

javascript vue.js vuejs2

Answer 1

Answer №1

Vue offers the ability to customize the v-model's prop name and event name using the component's model option:

model

New feature in version 2.2.0

Type:
{ prop?: string, event?: string }
Details:

This feature allows a custom component to define the prop and event used with v-model. By default, the v-model on a component uses value as the prop and input as the event. However, for certain input types like checkboxes and radio buttons, using the value prop for a different purpose may be desired. Utilizing the model option can resolve any conflicts that may arise in such scenarios.

Example:
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // value prop is used for a different purpose
    value: String,
    // checked prop replaces the value prop for this component
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
The above code will result in the following:
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

Answer 2

Vue offers the ability to customize the v-model's prop name and event name using the component's model option:

model

New feature in version 2.2.0

Type:
{ prop?: string, event?: string }
Details:

This feature allows a custom component to define the prop and event used with v-model. By default, the v-model on a component uses value as the prop and input as the event. However, for certain input types like checkboxes and radio buttons, using the value prop for a different purpose may be desired. Utilizing the model option can resolve any conflicts that may arise in such scenarios.

Example:
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // value prop is used for a different purpose
    value: String,
    // checked prop replaces the value prop for this component
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
The above code will result in the following:
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

Answer 3

Answer №2

To implement v-model, you must manually manage the value and @input events:

<template>
 <div>
  <input type="radio" :name="name" :value="value" @input="$emit('input', $event)" />
 </div
</template>

<script>
 export default {
  name: 'div-radio',
  props:{
    value: Boolean,
    name: String
  }
 }
</script>

When used in a host component, simply treat it like a regular component:

...
<div-radio name="name" v-model="variable1" />
<div-radio name="name" v-model="variable2" />
...

Answer 4

To implement v-model, you must manually manage the value and @input events:

<template>
 <div>
  <input type="radio" :name="name" :value="value" @input="$emit('input', $event)" />
 </div
</template>

<script>
 export default {
  name: 'div-radio',
  props:{
    value: Boolean,
    name: String
  }
 }
</script>

When used in a host component, simply treat it like a regular component:

...
<div-radio name="name" v-model="variable1" />
<div-radio name="name" v-model="variable2" />
...

What is the best way to set the `value` attribute and `v-model` attribute for a custom Vue component?

Answer №1

`model`

Answer №2

Similar questions

Using Jquery for a Second Timer

The initial rendering of the connected component is unsuccessful due to the fact that the Redux state has not been fully

The electron program is unable to locate the package.json module

Ways to determine if a script is currently running within Node.js环境

Querying MongoDB in Loopback is posing a challenge

Transferring event arguments to JavaScript in ASP.NET C# through OnClientClick

Steps to remove a script upon clicking a button?

Achieving the validation with a bold red border

Retrieving Browser URL using Node.js

Standing alone, an argument can never be fully validated without

Attempting to integrate a complex Ruby operation (using each loop and iterator) into a JavaScript platform (such as Google Charts API) by creatively combining them in a non-conventional manner during the development phase

Can modifications be made to a page's source content variable using Ajax?

What is the best way to transfer information to a different component using Vue router?

Is it possible to derive the language code without using the Common Locale Data Repository from a rough Unicode text

Changing the event when a class is active in Vue3

Guide on how to display registration form data on the current page as well as on a separate page

Ways to customize a directive to show conditionally with no need for container elements

Can VueJS lifecycle hooks be outsourced?

Is it possible to adjust the timezone settings on my GraphQL timestamp data?

The Coinbase Pay application fails to compile properly due to a missing Babel loader