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

Posted 2023-02-23

【中文标题】在 Laravel Nova Vue 组件中观看动态渲染的字段

【英文标题】：Watching a dynamically rendered field in Laravel Nova Vue component

【发布时间】：2020-04-19 12:56:01

【问题描述】：

在 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，所以我有一些潜在的方法可以模仿这种行为。

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

【参考方案1】：

那些组件会触发事件吗？尝试查看 Vue DevTools 的事件选项卡，以查看在更新值时是否从 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 值是该字段的新值。

如果您对默认表单域的行为有更多信息，请在 cmets 上联系我（是否可以在某处访问它们的完整代码？）。

【参考方案2】：

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

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