Vue dynamic binding V-model

Time:2021-10-14

At present, many input boxes write fixed fields through the front end. What if these fields are generated by the back end? Return fields through the back end, as shown in

{
   key:'input1',
   Label: 'input box 1'
},{
   key:'input2',
   Label: 'input box 2'
}

Then dynamically render the corresponding input box according to the number of key value pairs, so that the front end of the form does not need to modify the code if new fields are added.

Test page
     
         {{item.label}}:
     



export default {
    data(){
        return{
            inputList:[{
                key:'input1',
                Label: 'input box 1',
                value:''
            },{
                key:'input2',
                Label: 'input box 2',
                value:''
            },{
                key:'input3',
                Label: 'input box 3',
                value:''
            },{
                key:'input4',
                Label: 'input box 4',
                value:''
            },{
                key:'input5',
                Label: 'input box 5',
                value:''
            }]
        }
    },
    mounted() {
        this.$axios.get("/XX/XXXX").then(data => {
            this.inputList = data;
        });
    },
}

Here, it should be noted that the fields required by the general front end are key and label. Label is used to display and tell the user what this is for illustration. The back end generally requires key and value. Key is the field name, but it is strange to make the field name in Chinese (there may be bugs when using it in some environments. In consideration of generality, it is generally used in English). Anyway, if you don’t mind, just use the value of label as the key and add the two attributes of value.

In a word, these three fields are enough for us to use. If the back end of the request before rendering does not want to send the value field, after all, this is for filling in the value, which is basically null. In this way, we can obtain the list and then foreach() to assign an empty value in a loop. Of course, if these input boxes have a default value that needs to be returned by the back end, it is excluded. Similarly, when sending a request to the back-end, if the back-end does not need the label field (don’t be too troublesome, everything is for standardization, and the unused fields are not sent), it’s OK to process foreach() + delete when grouping messages.

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]