[Vuejs]-VUETIFY Problem With Component Communication (Props / Events – Parent Child Communication)

-1πŸ‘

I think v-model should work fine instead of :value but haven’t had time to test ist yet.

// Child HTML

    <input
      type="text"
      placeholder="regular child"
      v-model="valueRegularChild"
      @input="inputRegularChild"
      >
    <p>{{ regularInputValue }}</p> 


    <v-textarea
          type="text"
          placeholder="vuetify child"
          v-model="valueVuetifyChild"
          @input="inputVuetifyChild"
      ></v-textarea>
    <p>{{ vuetifyInputValue }}</p>

// Child – methods

        inputVuetifyChild($event) {

            this.$emit('msgVuetify', this.vuetifyInputValue);
        },
        inputRegularChild($event) {

            this.$emit('msgRegular', this.regularInputValue);
        },

// parent HTML

<child-component
        :valueVuetifyChild="insideParentVuetify"
        :valueRegularChild="insideParentRegular"
        @msgVuetify="insideParentVuetify = $event"
        @msgRegular="insideParentRegular = $event"
>
<child-component>

Leave a comment