How to propagate mode into the composite component of VueJS?

Question

Vuetify has a lot of options for text field component. My idea is to create a custom text field component with some predefined options like an icon, flat, box etc. But I do not want to play with value property and input event in my custom component. Is there a way how to propagate a model of my custom text field to the Vuetify text field?

Next code does not work but I would like to have something similar

<template>
  <v-text-field flat v-model="value" ></v-text-field>
</template>
<script>
export default {
  props: ['value']
}
</script>

Psidom Psidom · Accepted Answer · 2018-11-18T21:31:02

Pass the props value down to the v-text-field's value prop and emit an input event back to the custom text-field component @input. Then you'd be able to use v-model on your custom text-field component:

<template>
  <v-text-field flat :value="value" @input="$emit('input', $event)"></v-text-field>
</template>
<script>
export default {
  props: ['value']
}
</script>

Vue.component('app-text',{
  template: `<v-text-field flat :value="value" @input="$emit('input', $event)"></v-text-field>`,
  props: ['value']
})

new Vue({
  el: "#app",
  data: {
    value: 3
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">


<div id="app">
 <v-app>
  <v-layout column>
    <v-flex sm6 offset-sm3>
      <app-text v-model="value"></app-text>
      {{ value }}
    </v-flex>
  </v-layout>
</v-app>
</div>

How to propagate mode into the composite component of VueJS?

1 Answers