Vue v-model related knowledge summary

​v-model is a Vue directive that provides two-way data binding between input and form data or between two components.

This is a simple concept in Vue development, but the true power of v-model takes some time to understand.

By the end of this tutorial, you’ll understand all the different use cases for v-model and learn how to use it in your own projects.

Are you ready?

Me too. Let’s write some code.

What is v-model?

As we just discussed, v-model is a directive that we can use in our template code. A directive is a template token that tells Vue how we want to handle the DOM.

v-model tells Vue that we want to create a two-way data binding between the value in the template and the value in the data property.

A common use case for using v-model is when designing forms and inputs. We can use this to enable a DOM input element to modify data in a Vue instance.

Let's look at a simple example of using v-model on a text input.

<template>
 <div>
  <input 
   type='text'
   v-model='value'
  />
  <p> Value: {{ value }} </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   value: 'Hello World' 
  }
 }
}
</script>

As we type into our text input, we'll see our data attribute change.

What is the difference between v-model and v-bind?

The v-bind directive is often switched with v-model.

The difference between the two is that v-model provides two-way data binding.

In our case, this means that if our data changes, our input will change, and if our input changes, our data will change.

However, v-bind only binds data in one way.

This is useful when you want to create a clear one-way data flow in your application. However, you have to be careful when choosing between v-model and v-bind.

v-model modifiers

Vue provides two modifiers that allow us to change the functionality of v-model.

Each one can be added up like this, or even connected together.

<input 
 type='text'
 v-model.trim.lazy='value'
/>

.lazy

By default, v-model is synced with the state of the Vue instance (the data property) on every input event. This includes getting, losing focus, etc.

The lazy modifier modifies our v-model so it only syncs after a change event.

This reduces the number of times v-model attempts to sync with the Vue instance - and in some cases can improve performance.

.number

Normally, our input will automatically convert the input to a string - even if we input a number.

One way to ensure that a value is treated as a number is to use the .number modifier.

According to the Vue documentation, if the input changes, and parseFloat() cannot parse the new value, then the last valid value of the input will be returned.

<input 
 type='number'
 v-model.number='value'
/>

.trim

Similar to the trim method in most programming languages, the .trim modifier removes leading or trailing whitespace before returning the value.

Using v-model in custom components

Ok, now that we know the basics of v-model inside forms/inputs, let’s look at an interesting use of v-model — creating two-way data binding between components.

In Vue, data binding has two main steps:

Passing data from the parent node

Emit an event from a child component to update the parent component

Using v-model on a custom component allows us to pass a prop and handle an event with a directive.

<custom-text-input v-model="value" />
IS THE SAME AS
<custom-text-input 
  :modelValue="value"
  @update:modelValue="value = $event"
/>

Okay, so what does this mean?

Let's continue with the v-model form example and use a custom text input called CustomTextInput.vue.

The default name for values ​​passed using v-model is modelValue - we'll use this in our examples.

However, we can pass a custom model name like this.

<custom-text-input v-model:name="value" />

Note: When we use a custom model name, the name of the emitted method will be updated: name

Here’s a diagram from the Vue documentation that summarizes it.

Using v-model in custom components

We already have the parent component set up, so let's access it from the child component.

In CustomTextInput.vue, we have to do two things:

• Accepts our v-model value as a prop
• When our input changes, trigger an update event

Ok - let's first declare it as a prop in our script.

export default {
 props: {
  modelValue: String,
 }
}

Next, let's create our template, set the value to the modelValue prop, and whenever there is an input event, we emit the new value via update:modelValue.

<template>
 <div>
  <label> First Name </label>
  <input 
   type='text'
   placeholder='Input'
   :value='modelValue'
   @input='$emit("update:modelValue", $event.target.value)'
  />
 </div>
</template>

Using v-model

All right!

We have covered a basic example of using v-model to bind data between two components.

Let's look at some more advanced ways of using the v-model directive.

Using v-model multiple times on a component

v-model is not limited to being used once per component.

To use v-model multiple times, we just need to make sure to name each prop uniquely and access it correctly in the child components.

Let's add a second v-model to lastName.

In our parent component:

<template>
 <div>
  <custom-text-input 
   v-model='value' 
   v-model:lastName='lastName'
  />
  <p> Value: {{ value }} </p>
  <p> Last Name: {{ lastName }} </p>
 </div>
</template>

<script>
import CustomTextInput from './CustomTextInput.vue'

export default {
 components:
  CustomTextInput,
 },
 data() {
  return {
   value: 'Matt',
   lastName: 'Maribojoc'
  }
 }
}
</script>

Then, inside the child component:

<template>
 <div>
  <label> First Name </label>
  <input 
   type='text'
   :value='modelValue'
   placeholder='Input'
   @input='$emit("update:modelValue", $event.target.value)'
  />
  <label> Last Name </label>
  <input 
   type='text'
   :value='lastName'
   placeholder='Input'
   @input='$emit("update:lastName", $event.target.value)'
  />
 </div>
</template>

<script>
export default {
 props: {
  lastName: String,
  modelValue: String,
 }
}
</script>

Custom modifiers for V-model

As we discussed, there are a few modifiers built into Vue. But one day, we'll want to add our own.

Suppose we want to create a modifier to remove all whitespace from the input. We call this no-space.

<custom-text-input 
 v-model.no-whitespace='value' 
 v-model:lastName='lastName'
/>

In our input component, we can use a prop to capture the modifiers. The name of the custom modifier is nameModifiers.

props: {
 lastName: String,
 modelValue: String,
 modelModifiers: {
  default: () => ({})
 }
}

Ok, the first thing we need to do is change the @input handler to use a custom method. We can call it emitValue and it will accept the name of the property being edited and the event object.

<label> First Name </label>
<input 
   type='text'
   :value='modelValue'
   placeholder='Input'
   @input='emitValue("modelValue", $event)'
/>

In the emitValue method, before calling $emit, we check the modifiers. If the no-whitespace modifier is true, the value can be modified before sending it to the parent.

emitValue(propName, evt) {
 let val = evt.target.value
 if (this.modelModifiers['no-whitespace']) {
  val = val.replace(/\s/g, '')
 }
 this.$emit(`update:${propName}`, val)
}

in conclusion

Hopefully you learned something new about v-model.

In its basic use cases like forms and inputting data, v-model is a very simple concept. However, we can really learn more about v-model when we start creating custom components and handling more complex data.

The above is the detailed content of the summary of Vue ​v-model related knowledge. For more information about Vue ​v-model, please pay attention to other related articles on 123WORDPRESS.COM!