观看Laravel Nova Vue组件中的动态渲染字段

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。Morgan想要引起更多关注来回答这个问题。

在Laravel Nova中，通过检索要通过动态组件显示的字段列表来在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内部完成此操作。

我希望因为我仍然可以访问ID，所以我有一些潜在的方法可以模仿这种行为。

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

Answer 1

我建议您调查VueJS watch property。您可以收听函数调用，值更改等。

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