vue.js - 在 Laravel Nova Vue 组件中观察一个动态渲染的字段

Question

在 Laravel Nova 中，通过动态组件检索要显示的字段列表，在 Vue 中呈现 Action 模式。我已经用自己的自定义组件替换了 Action 模式，但在不扩展用于呈现表单字段的整个组件集的情况下，我正在努力实现我想要的效果。

我有我的 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 属性或无法访问表单元素绑定(bind)到的值，我不确定如何从 ActionModal.vue 中完成此操作。

我希望因为我仍然可以访问这些 ID，所以我可以通过一些潜在的方式来模拟这种行为。

我自己找到的许多资源告诉我，任何带有 ID 的东西都可以通过 this.$refs 访问，但这似乎不是真的。我只能在 this.$refs 中看到具有显式声明的 ref 属性的元素，因此我不确定我是否误解了那里的内容。

Answer 1

我建议查看 VueJS watch property .您可以监听函数调用、值更改等。

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