[Vuejs]-How to make changes in vue v-model syntax in vue

by

0👍

v-model is just a syntax sugar on setting & getting the data – prepared for all the input types:

You can use the v-model directive to create two-way data bindings on
form input, textarea, and select elements. It automatically picks the
correct way to update the element based on the input type. Although a
bit magical, v-model is essentially syntax sugar for updating data on
user input events, plus special care for some edge cases.

Source: Vue 2 v-model

That means, you can change v-model to something else, but then you have to handle the cases:

new Vue({
  el: "#app",
  data() {
    return {
      vmodeltext: null,
      modeltext: null,
      vmodelcb: null,
      modelcb: null,
    }
  },
  methods: {
    handleInputText({
      target: {
        value
      }
    }) {
      this.modeltext = value
    },
    handleInputCb({
      target: {
        checked
      }
    }) {
      this.modelcb = checked
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="vmodeltext" /><br /> With v-model: {{ vmodeltext }}<br />
  <hr />
  <input type="text" :value="modeltext" @input="handleInputText($event)" /><br /> With modeltext: {{ modeltext }}<br />
  <hr />
  <input type="checkbox" v-model="vmodelcb" /><br /> With v-model: {{ vmodelcb }}<br />
  <hr />
  <input type="checkbox" :checked="modelcb" @change="handleInputCb($event)" /><br /> With modelcb: {{ modelcb }}<br />
</div>

So, essentially you don’t need to change v-model with Webpack or a loader – just write the code in the way you need.

Leave a comment