Php 如何编辑Vue动态生成的组件
我想用从DB获取的数据填充动态生成的TextInput，编辑它，然后发送回DB 以下是单击DataTable中的一个项目时显示的我的EditZasob.vue组件：Php 如何编辑Vue动态生成的组件,php,vue.js,axios,schema,vuetify.js,Php,Vue.js,Axios,Schema,Vuetify.js,我想用从DB获取的数据填充动态生成的TextInput，编辑它，然后发送回DB 以下是单击DataTable中的一个项目时显示的我的EditZasob.vue组件： <template> <v-dialog v-model="valid" ref="editForm" persistent max-width="1000px" transition="scroll-
<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,
snackColor: "error",
snackText: error,
});
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", {
snack: true,
snackColor: "error",
snackText: error,
});
});
},
},
};
</script>
data_zakupu: "2020-10-22"
dostawca: "test supplier"
id: 44
id_grupy: 1
nazwa: "Test"
producent: "test2"
test: "dynamic data"
<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>
<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"
fieldType: "TextInput"
id: 39
label: "test label"
name: "test name"
nazwa: "test"
placeholder: "Test input"