[JavaScript知识库]vue3 +ts 动态绑定 响应式 数组

代码

//定义ts 接口类型
interface editFormDataType {
  label: string | number | boolean
  value: string | number | boolean
  prop: string
}

//需要绑定变量
editFormData

方法一: ref

	//定义变量
  const editFormData = ref([] as editFormDataType[])
  // 使用
  editFormData.value = [
          {
            label: '客户名称',
            value: '',
            prop: ''
          },
          {
            label: '单号',
            value: '',
            prop: ''
          }
   ]

方法二: reactive

	//定义变量
 	const editFormData: editFormDataType[] = reactive([])
  // 使用 添加数组
  editFormData.push(
  ...[
          {
            label: '客户名称',
            value: '',
            prop: ''
          },
          {
            label: '单号',
            value: '',
            prop: ''
          }
   ]
  )
  //修改数组
   editFormData.splice(0, 1, {
        label: '备注',
        value: '',
        prop: ''
      })
  //清空数组
  editFormData.length = 0;

方法三: reactive

   const state = reactive({
      editFormData: [] as editFormDataType[]
    })
    state.editFormData = [
      {
        label: '客户名称',
        value: '',
        prop: ''
      },
      {
        label: '单号',
        value: '',
        prop: ''
      }
    ]