<template> <template v-for="(item, index) in data" :key="index"> <el-form-item :label="item.label"> <template v-if="item.type === 'input'"> <el-input v-model="item.value" autocomplete="off" /> </template> <template v-else-if="item.type === 'select'"> <el-select v-model="item.value"> <el-option v-for="(option, index) in item.options" :key="index" :label="option.label" :value="option.value" /> </el-select> </template> <template v-else-if="item.type === 'checkbox'"> <el-checkbox v-model="item.value" /> </template> <template v-else> <el-input v-model="item.value" /> </template> </el-form-item> </template> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'FormInput', props: { data: Array, }, setup(props, { emit }) { const data = ref(props.data); console.log(data); return { data, }; }, }); </script>
把data 改为const data = toRefs(props.data);
return {
...data,
}; 就可以了
不知道为什么使用ref(props.data); 这种方式 不会变成响应式
