Vue动态绑定v-model

  • A+
所属分类:Web前端
摘要

  现在很多输入框是通过前端写死固定字段,如果这些字段是后端生成的呢?通过后端返回字段,形如

  现在很多输入框是通过前端写死固定字段,如果这些字段是后端生成的呢?通过后端返回字段,形如

{    key:'input1',    label:'输入框1' },{    key:'input2',    label:'输入框2' }

  然后根据键值对的数量动态渲染出相对应的input框,这样表单如果有新的字段添加的话前端就可以不用修改代码了。

<template>      <h2>测试页面</h2>      <div class="checkbox" v-for="(item,index) in inputList" :key="index">          {{item.label}}:<el-input v-model="inputList[index].value"></el-input>      </div> </template>  <script> export default {     data(){         return{             inputList:[{                 key:'input1',                 label:'输入框1',                 value:''             },{                 key:'input2',                 label:'输入框2',                 value:''             },{                 key:'input3',                 label:'输入框3',                 value:''             },{                 key:'input4',                 label:'输入框4',                 value:''             },{                 key:'input5',                 label:'输入框5',                 value:''             }]         }     },     mounted() {         this.$axios.get("/XX/XXXX").then(data => {             this.inputList = data;         });     }, } </script>

  在此,需要说明的是一般前端需要的字段为key和label,label用来展示,告诉用户这个是什么,作说明用。后端一般需要key和value,key是字段名,不过一般中文做字段名怪怪的(在某些环境下使用可能会出bug,从通用性考虑一般使用英文)。anyway,如果不介意,只需要把label的值作key,再加上value这两个属性就够了。

  总而言之,这三个字段够我们使用了,如果渲染前的请求后端不想发value字段,毕竟这个是为了填值用的,基本都是空值,这样就可以获取list之后forEach()来循环赋值一个空的value。当然,如果这些input框有需要后端返回的默认值除外。同理,在发请求送给后端的时候如果后端不需要label字段(不要嫌麻烦,一切都是为了规范,不用的字段不送),组报文的时候forEach()+delete处理掉就行了。