Question

在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属性或无法访问form元素绑定的值，因此我不确定如何从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);
}

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

1 个答案: