如何解决如何编辑Vue动态生成的组件
我想用从数据库获取的数据填充动态生成的TextInput，对其进行编辑，然后发送回数据库。
这是我的EditZasob.vue组件，它在单击DataTable中的一项时显示：
<template>
<v-dialog
v-model="valid"
ref="editForm"
persistent
max-width="1000px"
transition="scroll-y-transition"
>
<template v-slot:activator="{ on,attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
small
color="green darken-2"
@click="getZasob(zasob.id)"
>
<v-icon>mdi-pencil-box-outline</v-icon>
</v-btn>
</template>
<!-- Edycja grupy -->
<v-card>
<v-toolbar flat color="primary" dark>
<v-toolbar-title
>Edycja zasobu - {{ dialogForm.nazwa }}</v-toolbar-title
>
<v-spacer></v-spacer>
<v-btn icon dark @click="valid = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-form ref="editForm">
<v-card class="mx-auto pt-5">
<v-card-text>
<v-alert v-model="errorAlert" dense type="error" v-if="errors">
<template v-for="error in errors"> {{ error[0] }} </template>
</v-alert>
<v-container>
<v-row>
<v-col cols="12" sm="12" md="12" lg="12">
<v-text-field
v-model="dialogForm.nazwa"
label="Nazwa*"
:rules="textRules"
></v-text-field>
<v-text-field
v-model="dialogForm.producent"
label="Producent*"
:rules="textRules"
></v-text-field>
<v-autocomplete
v-model="dialogForm.dostawca"
:items="items"
:loading="isLoading"
loader-height="3"
:search-input.sync="search"
hide-no-data
hide-selected
dense
no-data-text="Brak wyników"
item-text="Nazwa"
item-value="Nazwa"
hint="Dostawca"
:placeholder="dialogForm.dostawca"
clearable
></v-autocomplete>
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on,attrs }">
<v-text-field
v-model="dialogForm.data_zakupu"
label="Data zakupu*"
readonly
:rules="textRules"
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
locale="pl"
v-model="dialogForm.data_zakupu"
@input="menu = false"
></v-date-picker>
</v-menu>
<form-generator
:schema="parametry"
v-model="dialogForm.test"
@input="logit"
>
</form-generator>
</v-col>
Dialog = {{ dialogForm }} Zasob = {{ zasob }} Params =
{{ parametry }}
</v-row>
</v-container>
<small>*Wymagane pola</small>
</v-card-text>
</v-card>
</v-form>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="resetForm">Anuluj</v-btn>
<v-btn
class="success"
text
:disabled="!valid"
:loading="loading"
@click="updateZasob"
>Zapisz</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import FormGenerator from "../zasob/FormGenerator";
export default {
data() {
return {
// Form data
dialogForm: {},// Sprawdzenie formy
dialog: false,textRules: [
(v) => (v && v.length >= 0) || "Wymagane pole",(v) => (v && v.length <= 200) || "Maksymalnie 200 znaków ",],textRulesOne: [
(v) => (v && v.length >= 0) || "Wymagane pole",(v) => (v && v.length <= 255) || "Maksymalnie 255 znaków ",// Loader
loading: false,// Vars
newWindow: false,division: this.divisionName.mysql,msDivision: this.divisionName.skrot,errors: {},menu: false,errorAlert: false,valid: false,// Autocomplate
descriptionLimit: 60,entries: [],isLoading: false,search: null,currentZasob: {},};
},props: {
divisionName: Object,zasob: Object,parametry: Array,},components: { FormGenerator },computed: {
items() {
return this.entries.map((entry) => {
const Description =
entry.Nazwa.length > this.descriptionLimit
? entry.Nazwa.slice(0,this.descriptionLimit) + "..."
: entry.Nazwa;
return Object.assign({},entry);
});
},watch: {
search(val) {
// Items have already been loaded
if (this.items.length > 0) return;
// Items have already been requested
if (this.isLoading) return;
this.isLoading = true;
// Lazily load input items
fetch(
"/api/" +
this.division +
"/" +
this.msDivision.toLowerCase() +
"/dostawca"
)
.then((res) => res.json())
.then((res) => {
const { data } = res;
this.entries = data;
})
.catch((error) => {
this.errors = error.response.data.errors;
this.errorAlert = true;
this.$emit("snackbar",{
snack: true,snackColor: "error",snackText: error,});
this.loading = false;
})
.finally(() => (this.isLoading = false));
},methods: {
logit(e) {
this.currentZasob = e;
},// Ustawia zasob
setZasob(zasob) {
let editableZasob = {
id: zasob.id,data_zakupu: zasob.data_zakupu,id_grupy: zasob.id_grupy,nazwa: zasob.nazwa,dostawca: zasob.dostawca,producent: zasob.producent,test: zasob.test,};
this.dialogForm = editableZasob;
},// Restart formy i walidacji
resetForm() {
this.$refs.editForm.reset();
this.valid = false;
this.errorAlert = false;
},// API put request - update zasobu
updateZasob() {
if (this.$refs.editForm.validate()) {
this.loading = true;
axios
.put("/api/" + this.division + "/zasob-new/" + this.dialogForm.id,{
zasob: this.dialogForm,})
.then((response) => {
this.errors = {};
this.errorAlert = false;
this.$emit("loadOverlay");
this.$emit("updatedZasob",response.data.zasob);
setTimeout(
() => (
this.resetForm(),(this.loading = false),this.$emit("snackbarAndGroups",{
snack: true,snackColor: "success",snackText: response.data.message,})
),2000
);
})
.catch((error) => {
this.errors = error.response.data.errors;
this.errorAlert = true;
this.$emit("snackbar",{
snack: true,});
this.loading = false;
});
}
},// API get request - pobiera zasob
getZasob(id) {
axios
.get("/api/" + this.division + "/zasob-one/" + id)
.then((response) => {
this.dialogForm = response.data;
this.errors = {};
this.errorAlert = false;
})
.catch((error) => {
this.errors = error.response.data.errors;
this.errorAlert = true;
this.$emit("snackbar",});
});
},};
</script>
在这里，我向用户显示表单，其中的文本字段填充了通过API调用获取的数据。除了这一动态生成的文本输入：
<form-generator
:schema="parametry"
v-model="dialogForm.test"
@input="logit">
</form-generator>
此组件应显示从数据库获取的“测试”列中的数据。
<form-generator>组件：
<template>
<div>
<component
v-for="(field,index) in schema"
:key="index"
:is="field.fieldType"
:value="dialogForm[field.nazwa]"
@input="updateForm(field.nazwa,$event)"
v-bind="field"
>
</component>
</div>
</template>
<script>
import TextInput from "../zasob/TextInput";
import DateInput from "../zasob/DateInput";
export default {
name: "FormGenerator",components: { TextInput,DateInput },props: ["schema","value"],data() {
return {
dialogForm: this.value || {},methods: {
updateForm(fieldName,value) {
this.$set(this.dialogForm,fieldName,value);
this.$emit("input",this.dialogForm);
},};
</script>
...和TextInput组件：
<template>
<div>
<v-text-field
type="text"
:name="name"
:value="value"
:label="label"
:placeholder="placeholder"
@input="$emit('input',$event)"
></v-text-field>
</div>
</template>
<script>
export default {
name: "TextInput",data() {
return {};
},props: {
placeholder: String,name: String,value: String,label: String,};
</script>
这是从数据库中获取的数据：
data_zakupu: "2020-10-22"
dostawca: "test supplier"
id: 44
id_grupy: 1
nazwa: "Test"
producent: "test2"
test: "dynamic data"
test的 dynamic data元素是应该进入<form-generator>组件的元素，显示在文本字段中。然后，我想对其进行编辑并保存回数据库。
由于<form-generator>组件由schema驱动，因此以下代码仅适用于test元素：
fieldType: "TextInput"
id: 39
label: "test label"
name: "test name"
nazwa: "test"
placeholder: "Test input"
如何将从API提取的数据绑定到<form-generator>组件，进行编辑并与其他所有数据一起发送回去？
非常感谢！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。