使用公共输入字段时无法编辑数据

时间:2019-04-21 09:06:17

标签: javascript laravel vue.js

我有一个公共输入字段,可用于许多组件。但是我现在正尝试在需要编辑输入字段时使其也可编辑。但是,当我打开编辑模式时,它没有显示数据库中的先前值。

我试图将值从一个组件传递到我的公共输入字段组件。

公用输入字段组件

<common-input :inputValue="product.price" v-model="product.price" v-validate="'required'" name="price"></common-input>

常用输入字段

<template>
    <input type="text" :id="id" class="form-control" v-model="value" @keyup="checkData">
</template>
<script>
    const {unformat} = require('number-currency-format');
    import axiosGetPost from '../../helper/axiosGetPostCommon';

    export default {
        extends: axiosGetPost,
        props: ['id','inputValue'],
        data() {
            return {
                value: ''
            }
        },
        mounted() {
        },
        watch: {
            value: function (newVal) {
                this.processData(newVal);
            },
        },
        created() {
            this.editData();
        },
        methods: {
            editData(){
                let instance = this;
                if (this.inputValue) {
                    this.value = instance.numberFormat(this.inputValue);
                    let check = this.value.search(this.currencySymbol);
                    this.value = this.value.slice(check);
                }
            },
            checkData(value) {
                let formattedNumber = '';
                if (this.value && this.value != this.currencySymbol) {
                    formattedNumber = unformat(this.value, {
                        thousandSeparator: this.thousandSeparator,
                        decimalSeparator: this.decimalSeparator,
                    });
                }

                this.$emit('input', formattedNumber);
            },
            processData(newVal) {
                let allowChar, check, checkDecimalSep;

                if (this.thousandSeparator === "space") this.thousandSeparator = ' ';

                allowChar = new RegExp("[^0-9\b" + this.thousandSeparator + this.decimalSeparator + "\b]", "is");
                this.$set(this, 'value', newVal.replace(allowChar, ''));
                check = this.value.substring(0, 1);

                if (check == this.decimalSeparator || check == this.thousandSeparator) this.value = this.value.substring(1);

                let currentChar = newVal.slice(-1);
                if (currentChar == this.thousandSeparator || currentChar == this.currencySymbol || currentChar == this.decimalSeparator) {

                    checkDecimalSep = newVal.split(this.decimalSeparator).length - 1;

                    if (checkDecimalSep > 1) {
                        this.value = this.value.substring(0, this.value.length - 1);
                    }
                }
            }
        }
    }

</script>

当我向数据库中插入任何内容时,它将成功运行。但是,当我要编辑时,它没有显示该字段的先前值。 例: 插入数据时 价格:20 但在编辑模式中,它在价格字段中显示空白字段。 预先感谢。

0 个答案:

没有答案