vue3的ref响应式问题？

Question

vue3的ref响应式问题？

在vue3框架中，我使用ref定义了一个变量，但是发现在更新其数据之后，页面上并不会有响应式变化，具体表现是在更新数据之后不会出现表格最前面的选择框

数据定义

const rowSelections = ref<Record<string, ComputedRef<object> | null>>({})

数据初始化，其中list是一个数组，具有唯一的id属性

list.value.forEach((el) => {
   rowSelections.value[el.id] = null
})

组件A中定义了计算属性rowSelection

const isBatching = ref<boolean>(false)
const rowSelection = computed(() => {
      if (isBatching.value) {
        return {
          columnWidth: 30,
          selectedRowKeys: selectedRowKey.value,
          getCheckboxProps: (record) => {
            return {
              props: {
                disabled: !isActivated(record)
              }
            }
          },
          onChange: (selectedRowKeys: string[], selectedRows) => {
            selectedRowKey.value = selectedRowKeys
          }
        }
      }
      return null
    })

当点击一个按钮之后，触发BatchEdit函数，通过emit抛出新的rowSelection

const batchEdit = () => {
      isBatching.value = true
      selectedRowKey.value = []
      emit('rowSelectionChange', {
        rowSelection,
        id: props.id
      })
    }

在父组件中进行事件定义并更新内容

const rowSelectionChange = ({
    rowSelection,
    id
  }) => {
    rowSelections.value[id] = rowSelection
  }

rowSelections的使用

<a-table
      :row-selection="rowSelections[text.id]"
      :columns="columns"
      :data-source="data"
    />

前端 javascript typescript vue.js

阅读 993

AI BotBETA

根据你提供的代码，问题可能出在以下几个方面：

初始化问题：在初始化 rowSelections 时，你为其赋值为一个空对象。然而，在 Vue 3 的响应式系统中，直接对对象或数组进行赋值并不会触发更新。你可能需要使用 set 方法来更新响应式变量。
计算属性问题：在你的 rowSelection 计算属性中，你根据 isBatching 的值返回不同的值。然而，你在 batchEdit 函数中修改了 isBatching 的值，但没有触发组件的重新渲染，因为 Vue 3 的计算属性不会因为依赖属性的变化而自动重新计算。你可能需要使用 computed.recomputable 来解决这个问题。
事件处理问题：在父组件中，你通过事件 rowSelectionChange 来更新 rowSelections。然而，你在更新 rowSelections 的值时直接将其赋值为一个新的对象，这并不会触发 Vue 的响应式系统。你应该使用 set 方法来更新 rowSelections 的值。

下面是一些可能的解决方案：

// 使用 set 方法来初始化 rowSelections
const rowSelections = ref<Record<string, ComputedRef<object> | null>>({})
set(rowSelections, el.id, null)

// 使用 computed.recomputable 来创建 rowSelection 计算属性
const isBatching = ref<boolean>(false)
const rowSelection = computed.recomputable(() => {
  if (isBatching.value) {
    return {
      columnWidth: 30,
      selectedRowKeys: selectedRowKey.value,
      getCheckboxProps: (record) => {
        return {
          props: {
            disabled: !isActivated(record)
          }
        }
      },
      onChange: (selectedRowKeys: string[], selectedRows) => {
        selectedRowKey.value = selectedRowKeys
      }
    }
  }
  return null
})

// 使用 set 方法来更新 rowSelections 的值
const rowSelectionChange = ({ rowSelection, id }) => {
  set(rowSelections, id, rowSelection)
}

请注意，这些只是可能的解决方案，并不能保证完全解决你的问题。你可能需要根据你的具体情况进行调整。

1 个回答

得票最新

玛拉_以琳

8.7k41541

发布于
1 月 4 日上海