如何在另一个自定义字段vue组件中访问nova字段的值

时间:2019-06-20 12:12:23

标签: laravel vue.js laravel-nova

PHP 7.3

Laravel 5.8

我正在创建一个表单字段总计,即其他两个字段quantityprice的值相乘

这是我的代码

export default {
    mixins: [FormField, HandlesValidationErrors],

    props: ['resourceName', 'resourceId', 'field'],

    computed: {
        calculatedTotal: function () {
            //return parseFloat(field.price) * parseFloat(field.quantity);
            return 10;
        }
    },

    methods: {
        /*
         * 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 || '')
        },

        /**
         * Update the field's internal value.
         */
        handleChange(value) {
            this.value = value
        },
    },
}

和模板

<template slot="field">
   <input
         :id="field.name"
         type="text"
         class="w-full form-control form-input form-input-bordered"
         :class="errorClasses"
         :placeholder="field.name"
         v-model="calculatedTotal"
      />
 </template>

我无法在此处访问这些值,数量字段是Laravel Nova默认数字字段,价格字段是Money field。使用上面的注释代码,我得到了错误,未定义的field

1 个答案:

答案 0 :(得分:0)

如果您在某个字段内,我认为您应该在当前字段的父级中查找其他字段。 在类似的情况下,我做了类似的事情:

calculatedTotal: function () {
    return parseFloat(this.getElementValue(this.$parent, 'price')) * parseFloat(this.getElementValue(this.$parent, 'quantity'));
}

在“方法”部分中,我创建了getElementValue作为一种方法,该方法可以检查传递的父级的所有子级,并获取具有传递的属性的子级的值:

        getElementValue(root, elemName){
            let value = null
            root.$children.forEach(component => {
                if (component.field !== undefined && component.field.attribute == elemName) {
                    value = component.field.value
                }
            })
            return value
        }