T-select runs @change event two times

[Morteza Ziyaeimehr]

If you add @change on <t-select /> it will execute the onChange method two times. Once with $event parameter and second time with it's new value.

<t-select @change="onChange" :options="[1, 2, 3]" v-model="mymodel" />

methods: {
  onChange(parameter1) {
    console.log(parameter1);
    // by selecting item 2 in t-select will print:
    // Event {isTrusted: true, ...}
    // '2'
  }
}

[Loïc DELOBEL]

We have the same behavior for t-input and I think that's a serious performance issue.

<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.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('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="varComputed" />
</template>

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

What do you think?