The field names bound to the input box v-model need to be dynamically generated based on the data returned in the background. At this time, you cannot use v-model to bind. Instead, you can use the traditional method value to bind dynamically, and use child component binding to pass values and events to the parent component. The code is as follows:
//Subcomponent<template>
<input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">
<textarea v-else :value="currentValue" @change="handleInput"></textarea>
</template>
<script>
export default {
// Receive the status (value) passed by the parent component props: {
type: Number, //0 input box 1 text field value: String // Sometimes the value is edited to get the value first. Similar to v-model },
data() {
return {
currentValue:
}
},
methods: {
handleInput(e) {
let value =
if (value === ) {
return
} else {
= value
}
this.$emit('input', value)
}
}
}
</script>
// Parent component//extendTypes dynamically retrieves the extended field. The model that needs to be bound is <div class="form-group" v-for="item in extendTypes"> <div> <ad-input :value="extendTypesModel[]" :type="" @input="handleUpdate(, $event)"> </ad-input> </div> </div>
// The model is dynamic and cannot be written to death. You can only define a json extendTypesModel locally. After obtaining the data from the background, the local assignment is empty. = {}
if (res && === 0) {
for (let i = 0; i < ; i++) {
[[i].extendKey] = ''
}
=
}
//Events registered by parent componenthandleUpdate(key, value) {
[key] = value
}
Parent-child components communicate through custom properties and custom events.
Parent component Custom attribute v-bind Pass the parent's value to the child
The child component accepts the parent's value through props. After accepting it, you can use it directly like data.
Inside the child component, the value is passed to the parent component through the $.emit (parent component method name, value) method. The parent component gets the value and triggers the parent component event.
This method now seems to be a pitfall because the subcomponents will have a cache for the data. Each time, it is not a new input box, but a new input box has been generated before. If so, it will not be generated. Therefore, the data has a cache and cannot be cleared. It is simply a simpler way.
<div class="form-group" v-for="(item, index) in extendTypes">
<label class="control-label">{{}}</label>
// Neither you need to use v-model to bind, nor do you need to use child components. Separate the assignment and the value instead of using v-model to bind, here you use ref
<input class="form-control" :value="extendTypesModel[]" @input="handleUpdate(, index)" ref="ipt">
</div>
<div class="text-danger" v-if=" === 1">*</div>
</div>
handleUpdate(key, index) {
[key] = this.$[index].value
}
Ref binds the value of the value of the ref to register the reference information for the element or child component, binds the value of the bound value of the ref to register the reference information for the element or child component, and binds it to the top. If it is a v-for traversal, the bound array is an array.
Generally, the value is obtained by $