VUETIFY Problem With Component Communication (Props / Events - Parent Child Communication)

Question

Vuetify Component Communication Problem (Props / Events - Parent Child Communication)

Hi, I try to pass data between parent and child like this tutorial: https://www.youtube.com/watch?v=PPmg7ntQjzc

Regular HTML input works fine (just like in the tutorial).

But vuetify text field or text area don't work. (it seems fine at first. when I start type, it gives error)

What am I doing wrong?

// Child HTML

    <input
      type="text"
      placeholder="regular child"
      :value="valueRegularChild"
      @input="inputRegularChild"
      >
    <p>{{ regularInputValue }}</p> 


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

// Child - methods

        inputVuetifyChild($event) {
            this.vuetifyInputValue = $event.target.value;
            this.$emit('msgVuetify', this.vuetifyInputValue);
        },
        inputRegularChild($event) {
            this.regularInputValue = $event.target.value;
            this.$emit('msgRegular', this.regularInputValue);
        },

// parent HTML

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

everything same.

Regular works, Vuetify don't

consol log error says:

TypeError: Cannot read property 'value' of undefined

thanks in advance

Quickly glanced, but try :input-value="valueVuetifyChild" instead of :value maybe? Or just $event instead of $event.target.value. Vuetify uses different props and events sometimes than native components. — Traxo
Yeah, it's the $event.target that is undefined. Try inputRegularChild($event) {console.log($event)} and see what you can use in there. — Andrew1325
@Traxo & @ Andrew1325 yes you are right. $event instead of $event.target.value works perfect. Thanks. It also work with select menu. however, it don't work with checkbox or radios. Can you suggest something for them also? — Uzun_Ihsan

lwolf lwolf · Accepted Answer · 2019-04-10T09:12:12

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