我有一个公共输入字段,可用于许多组件。但是我现在正尝试在需要编辑输入字段时使其也可编辑。但是,当我打开编辑模式时,它没有显示数据库中的先前值。
我试图将值从一个组件传递到我的公共输入字段组件。
公用输入字段组件
<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 但在编辑模式中,它在价格字段中显示空白字段。 预先感谢。