how to enable v-model binding when building a custom components from other custom components

Question

I am able to build a simple textbox component from <input /> and setup v-model binding correctly.

I'm trying to do same with a custom component: vs-input from vuesax.

Following the pattern below does not work as expected:

<template>
  <div>
    <vs-input type="text" v-model="value" @input="text_changed($event)" />
    <!-- <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> -->
  </div>
</template>

<script>
export default {
  name: 'TestField',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    text_changed(val) {
      console.log(val)
      // this.$emit('input', val)
    }
  }
}
</script>

In building custom components from other custom components is there anything particular we should look out for to get v-model binding working properly?

with the regular input box, v-model binding works. In vs-input, i'm unable to get v-model binding to work, using the same code pattern — Charles Okwuagwu, Mar 25 '19 at 17:14
Could you please tell me is following code working fine or not? — Pallamolla Sai, Mar 25 '19 at 17:38
@PALLAMOLLASAI no. gives errors `Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "test" ` — Charles Okwuagwu, Mar 25 '19 at 17:39
could you please check this link once. https://stackoverflow.com/questions/51954716/updating-a-prop-inside-a-child-component-so-it-updates-on-the-parent-container-t — Pallamolla Sai, Mar 25 '19 at 17:44
this link also might help you. https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn — Pallamolla Sai, Mar 25 '19 at 17:49

Pallamolla Sai · Answer 1 · 2019-03-26T04:07:10.677

Following code might help you.(Sample code try it in codepen)

updating props inside a child component

//html
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <input type="text" :value="test" @change="abc">
  {{ test }}
</div>

//VUE CODE

new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue.js!',
      },
   props:{
     test:{
        type:String,
        default:''
     } 
   },
  methods:{
     abc:function(event){
      //console.log("abc");
      console.log(event.target.value);
      this.test=event.target.value;
    }
   }
  })

score 1 · Answer 2 · edited Jul 16 '22 at 02:54

I prefer to interface props with computed:

<template>
  <div>
    <vs-input type="text" v-model="cValue" />
  </div>
</template>

<script>
export default {
  name: 'TestField',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    cValue: {
      get: function(){
        return this.value;
      },
      set: function(val){

         // do w/e
         this.$emit('input', val)
      }
    }
  }
}
</script>

Computed Setter

how to enable v-model binding when building a custom components from other custom components

2 Answers2