t-input input event called twice

[loic001]

Hello, I create a new issue for that because I think it's an important one. The input event is called twice, and the same applies to other components (t-select, ...).

<t-input :value="var" @input="val => this.var = val"/>
// or with v-model
<t-input v-model="var"/>

We can clearly see that with a log in the setter of a computed property:

  data() {
    return {
      varProxy: '456'
    }
  },
  computed: {
    var: {
      get(){
        return this.varProxy
      },
      set(val) {
        console.log('val', val) //this is called twice because input event is called twice
        this.varProxy = val;
      }
    },
  }

I guess it's because of the double watchers on the prop and localValue here... This pattern is used:

// <t-input> component

<template>
  <input v-model="localValue" />
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      localValue: this.value,
    }
  },
  watch: {
    localValue(localValue) {
        console.log('localValue changed', localValue)
        this.$emit('input', localValue)
    },
    value(value) {
    console.log('prop value changed', value)
      this.localValue = value
    },
  },
}
</script>

I don't really see the point of this double watcher. Would be better to have something like this:

// <my-input> component


<template>
    <input v-model="localValue" />
</template>

<script>
export default {
    props: ['value'],
    computed: {
        localValue: {
            get(){
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            }
        }
    }
}
</script>

What do you think? thanks!

Originally posted by @loic001 in #195 (comment)