Watching a dynamically rendered field in Laravel Nova Vue component

Question

In Laravel Nova, action modals are rendered in Vue by retrieving a list of fields to display through a dynamic component. I have replaced the action modal with own custom component, but am struggling to achieve the effect I want without also extending the entire set of components for rendering form fields.

I have my CustomResourceIndex.vue, containing a conditionally loaded (via v-if) ActionModal.vue, in which the form fields are rendered like so:

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

where the actual form field component is chosen based on the field.component value.

Those form fields (which I ideally do not want to have to extend and edit) are rendered like so:

    <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>

I would like to watch the value of specific fields and run methods when they change. Unfortunately due to a lack of ref attribute on the input elements or access to the value that the form element is bound to, I'm not sure how I can accomplish that from within ActionModal.vue.

I am hoping that because I have access to the ids still, there is some potential way for me to emulate this behavior.

Many resources I've found on my own have told me that anything with an ID is accessible via this.$refs but that does not seem to be true. I can only see elements that have an explicitly declared ref attribute in this.$refs, so I am not sure if I've misunderstood something there.

score 3 · Answer 1 · edited Jul 15 '22 at 21:41

3

I would recommend looking into VueJS watch property. You can listen to function calls, value changes etc.

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

edited Jul 15 '22 at 21:41

tony19

125,647
18
229
307

answered Jan 03 '20 at 15:19

Rosin

141
1
5

score 2 · Answer 2 · answered Jan 07 '20 at 09:21

Are those components triggering events? Try looking into the events tab of the Vue DevTools to see if some events are triggered from the default-field component when you update the value.

My guess is that you could write something like:

<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>

The $event value being the new value of the field.

Hit me on the comments if you have more info on the behavior of the default form fields (Are their complete code accessible somewhere?).

Watching a dynamically rendered field in Laravel Nova Vue component

2 Answers2