Блог

Главная - Вопросы по программированию - Проблема VUETIFY с коммуникацией компонентов (реквизит / события — связь между родителями и дочерними элементами)

Проблема VUETIFY с коммуникацией компонентов (реквизит / события — связь между родителями и дочерними элементами)

#vue.js #vue-component #vuetify.js #nuxt.js

#vue.js #vue-компонент #vuetify.js #nuxt.js

Вопрос:

Проблема связи компонентов 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 не работают

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

Ошибка типа: не удается прочитать свойство ‘value’ неопределенного значения

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

Комментарии:

1. Быстро взглянул, но попробуйте :input-value="valueVuetifyChild" вместо :value , может быть? Или просто $event вместо $event.target.value . Vuetify иногда использует другие реквизиты и события, чем собственные компоненты.

2. Да, это $event.target, который не определен. Попробуйте inputRegularChild($event) {console.log($event)} и посмотрите, что вы можете там использовать.

3. @Traxo amp; @ Andrew1325 да, вы правы. $event вместо $event.target.value этого работает идеально. Спасибо. Он также работает с меню выбора. Однако it don't work with checkbox or radios . Можете ли вы предложить что-нибудь и для них?

Ответ №1:

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

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

Комментарии:

1. Я пытался, но не работает. выдает ошибку (не только текстовое поле vuetify, но и область ввода) ошибка гласит: commons.app.js: 12663 [Предупреждение Vue]: избегайте прямого изменения реквизита, поскольку значение будет перезаписываться при повторном отображении родительского компонента. Вместо этого используйте данные или вычисляемое свойство на основе значения реквизита. Реквизит мутирует: «valueRegularChild»

2. хорошо, извините, я не видел, что это была опора … мне нужно взглянуть на нее позже..

3. @Iwolf это работает с приведенным выше примером ($event вместо $event.target.value), но это не работает с флажком и радиоприемниками. у вас есть какие-либо предложения?

4. Рад это слышать! Используете ли вы флажки, подобные <input type="checkbox" /> или что-то из vuetify?

5. Я использую v-флажок. На самом деле мне удается передавать отдельные значения отдельно. Но я не смог объединить их в один массив. (другими словами, я могу получить значение в нескольких отдельных строках, а не в одном массиве). Конечно, я могу сделать это в родительском, но я пытаюсь найти способ сделать это дочерним компонентом