laravel - 在 Laravel Nova (VueJS) 中存储动态字段

Question

我正在尝试在 Laravel Nova 中创建自定义字段。它基本上是从数据库中生成输入，一切都已经结束，一切都很好。但是，我无法获得正在生成的输入值以保存到数据库中（JSON）

模板：

    <template>
    <default-field :field="field" :errors="errors" :show-help-text="showHelpText">
      <template slot="field">
        <div v-for="item in fields" class="flex border-b border-40">
            <div class="w-1/5 px-8 py-6"><label class="inline-block text-80 pt-2 leading-tight"> {{ item.text}}</label></div>
            <div class="py-6 px-8 w-1/2" v-if="item.type !== 'select'">
            <input
                v-if="item.type === 'number' || item.type === 'text'"
                :id="item.name"
                :name="item.name"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :value="value"
                v-bind="field.attributes"
                :placeholder="item.text"
                @input="$emit('input', $event.target.value)"
            />
        </div>
    </div>
  </template>
  </default-field>
</template>

脚本：

        data() {
      return {
          parentValue: null,
          fields: []
      }
    },
    mounted() {
        this.watchedComponents.forEach(component => {
            let attribute = 'value'

            if(component.field.component === 'belongs-to-field') {
                attribute = 'selectedResource';
            }

            component.$watch(attribute, (value) => {
                this.parentValue = (value && attribute === 'selectedResource') ? value.value : value;
                this.updateResults();
            }, { immediate: true });
        });
    },

    computed: {
        watchedComponents() {
            if(!this.field.parent_value) {
                return [];
            }

            return this.$parent.$children.filter(component => {
                return this.isWatchingComponent(component);
            })
        },
        endpoint() {
            return this.field.endpoint
                .replace('{resource-name}', this.resourceName)
                .replace('{resource-id}', this.resourceId ? this.resourceId : '')
                .replace('{'+ this.field.parent_value +'}', this.parentValue ? this.parentValue : '')
        },
    },

    methods: {

    debug(value) {
      console.log(value);
    },

    isWatchingComponent(component) {
      return component.field !== undefined
          && component.field.attribute === this.field.parent_value;
    },

    updateResults() {
        this.fields = [];
        this.loaded = false;

        if(this.notWatching() || (this.parentValue != null && this.parentValue !== '')) {
            Nova.request().get(this.endpoint)
            .then(response => {
                this.loaded = true;
                this.fields = response.data;
            })
        }
    },

    notWatching() {
      return this.field.parent_value === undefined;
    },
    /*
     * Set the initial, internal value for the field.
     */
    setInitialValue() {
      this.value = this.field.value || '';
    },

    /**
     * Fill the given FormData object with the field's internal value.
     */
    fill(formData) {
       formData.append(this.field.attribute, this.value || '')
    },
  },

所以我只需要获取新生成的输入的值并将其传递给 formData.append

标签： laravelvue.jslaravel-nova