Building custom component from other custom components

vue-core

#1

I am able to build a custom textbox by wrapping a plain <input /> and setting up v-model

Now want to do the same using the vuesax textbox component vs-input, but it’s either i’m doing something very wrong, or vuesax has implemented their vs-input in a way that wrapping it is impossible.

<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>


#2

Solved:

<template>
  <div>
    <vs-input type="text" v-model="internalValue" @input="changeData()" />
  </div>
</template>

<script>
export default {
  name: 'TestField',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      internalValue: ''
    }
  },
  mounted() {
    this.internalValue = this.value
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal
    }
  },
  methods: {
    changeData() {
      this.$emit('input', this.internalValue)
    }
  }
}
</script>