Просмотр динамически отображаемого поля в компоненте Laravel Nova Vue

Просмотр динамически отображаемого поля в компоненте Laravel Nova Vue

30.12.2019 11:36:33 Просмотров 26 Источник

В фреймворк Laravel Нова, модальные глаголы действия отображаются в Vue на получение списка полей для отображения с помощью динамического компонента. Я заменил модальное действие собственным пользовательским компонентом, но изо всех сил стараюсь достичь желаемого эффекта, не расширяя также весь набор компонентов для отображения полей формы.

У меня есть свой CustomResourceIndex.vue, содержащий условно загруженный (через v-if) ActionModal.vue, в котором поля формы отображаются следующим образом:

    <div class="action" v-for="field in action.fields" :key="field.attribute">
        <component
            :is="'form-' + field.component"
            :resource-name="resourceName"
            :field="field"
        />
    </div>

где фактический компонент поля формы выбирается на основе этого field.componentзначение компонента.

Эти поля формы (которые я в идеале не хочу расширять и редактировать) отображаются примерно так:

    <template>
      <default-field :field="field" :errors="errors">
        <template slot="field">
          <input
        class="w-full form-control form-input form-input-bordered"
        :id="field.attribute"
        :dusk="field.attribute"
        v-model="value"
        v-bind="extraAttributes"
        :disabled="isReadonly"
          />
        </template>
      </default-field>
    </template>

Я хотел бы следить за значением конкретных полей и запускать методы, когда они изменяются. К сожалению, из-за отсутствия ref.

Я надеюсь, что, поскольку у меня все еще есть доступ к идентификаторам, есть какой-то потенциальный способ для меня эмулировать это поведение.

Многие ресурсы, которые я нашел самостоятельно, сказали мне, что все, что имеет идентификатор, доступно через ActionModal.vue, но это не похоже на правду. Я могу видеть только элементы, которые имеют явно объявленный this.$refs, так что я не уверен, что я неправильно понял что-то там.

У вопроса есть решение - Посмотреть?

Ответы - Просмотр динамически отображаемого поля в компоненте Laravel Nova Vue / Watching a dynamically rendered field in Laravel Nova Vue component

Rosin

03.01.2020 06:19:49

Я бы рекомендовал заглянуть в отель VueJS watch . Вы можете прослушивать вызовы функций, изменения значений и т. д.

watch: {
'field.component': function(newVal, oldVal) {
    console.log('value changed from ' + oldVal + ' to ' + newVal);
}
Hammerbot

07.01.2020 12:21:52

Являются ли эти компоненты инициаторами событий? Попробуйте посмотреть на вкладке Вью инструменты разработчика, чтобы увидеть, если срабатывают некоторые события из default-field компонент, когда вы обновите значение.

Я думаю, что вы могли бы написать что-то вроде:

<div class="action" v-for="field in action.fields" :key="field.attribute">
    <component
        :is="'form-' + field.component"
        :resource-name="resourceName"
        :field="field"
        @input="doSomething($event)"
    />
</div>

Значение $eventявляется новым значением поля.

Ударь меня по комментариям, если у вас есть больше информации о поведении полей формы по умолчанию (доступен ли где-нибудь их полный код?).

Закрыть X