vue v-model 动态生成

vue v-model 动态生成

1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成，此时就不可以用 v-model绑定，而是用传统的方法 value 动态绑定，并且用子组件绑定向父组件传递值和事件。 代码如下：

//子组件
<template>
  <input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">
  <textarea v-else :value="currentValue" @change="handleInput"></textarea>
</template>

<script>
export default {
// 接收父组件传递过来的状态（值）
  props: {
    type: Number,   //0 input框 1 文本域
    value: String   // 值有时候编辑状态也是先要获取值的 类似 v-model
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  methods: {
    handleInput(e) {
      let value = e.target.value
      if (value === this.currentValue) {
        return
      } else {
        this.currentValue = value
      }
      this.$emit('input', value)
    }
  }
}
</script>

//父组件
//extendTypes 动态获取过来的扩展字段 需要绑定的model 为item.extendKey

<div class="form-group" v-for="item in extendTypes">
   <div>
     <ad-input  :value="extendTypesModel[item.extendKey]" :type="item.type" @input="handleUpdate(item.extendKey, $event)">
     </ad-input>
   </div>
</div>