How to bind an object to v-model in vue

When using v-model to bind an object in Vue, you need to bind v-model to the object property, that is, . When data is updated, object properties and Vue instance data will automatically update in both directions.

Use v-model to bind objects in Vue

The v-model directive in Vue.js is available Used to create two-way data binding between HTML elements and Vue instance data. However, v-model is typically used to bind simple data types such as strings or numbers.

Bind objects to v-model

To bind an object to v-model, you can use the following method:

<code class="html"><input v-model="object.property"></code>

Where:

• object is the Vue instance property containing the object to be bound.
• property is a property in the object and is used for data binding.

Updates of object properties

When entering or modifying form elements, any changes to object.property will automatically be reflected in Vue In the example, vice versa.

Example

The following example shows how to bind the name property of an object to an input box:

<code class="html"><template>
  <div>
    <input v-model="user.name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    }
  }
}
</script></code>

When the user enters a new value, the user.name property will be updated accordingly, and vice versa.

The above is the detailed content of How to bind an object to v-model in vue. For more information, please follow other related articles on the PHP Chinese website!