VUETIFY Проблема с компонентным взаимодействием (Реквизиты / События - Родительское дочернее общение) - PullRequest
Новая
       16

VUETIFY Проблема с компонентным взаимодействием (Реквизиты / События - Родительское дочернее общение)

0 голосов
/ 10 апреля 2019

Проблема связи компонента Vuetify (Реквизиты / События - Связь родительского и дочернего элементов)

Привет, я пытаюсь передать данные между родителем и дочерним объектом, как показано в этом руководстве: https://www.youtube.com/watch?v=PPmg7ntQjzc

Работает обычный ввод HTMLхорошо (как в учебнике).

Но текстовое поле vuetify или текстовая область не работают.(сначала кажется, что все нормально. Когда я запускаю тип, он выдает ошибку)

Что я делаю не так?

// Дочерний 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>

// Дочерний- методы 

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

// родительский HTML 

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

все то же самое.

Регулярно работает, Vuetify not

Консоль журнала ошибок говорит:

TypeError: Невозможно прочитать свойство 'value' из неопределенного

заранее спасибо

1 Ответ

0 голосов
/ 10 апреля 2019

Я думаю, v-model должно работать нормально, а не :value, но еще не успел проверить его.

// Дочерний 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>

// Дочерний -методы 

        inputVuetifyChild($event) {

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

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

// родительский HTML 

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