Question

刚开始使用Vue composition-api（与Vue2一起使用），我遇到了一些反应？问题。

在模板中，我想根据所选日期呈现元素列表。

我的模板：

...
<div v-for="(act, idx) in elementsPerDay[dateMatchable]" :key="idx">
   ...some content...
</div>
...

现在的问题是，当创建组件并获取数据时，什么也没有呈现，并且 elementsPerDay 为空（在模板中）。一旦我强制模板更新（例如，通过调用 vm。$ forceUpdate（）），一切正常。

我的设置：

...
const selectedDate = new Date()
const { data } = <async function to get data>
const dateMatchable = computed(() => formatDate(selectedDate, 'YYYY-MM-DD')) // returns selectedDate as YYYY-MM-DD

// Here I init my reactive object
const elementsPerDay = reactive({})

// Here I fill my elementsPerDay when data changes (basically grouping data by day)
watch(data, e => {
  const elsPerDay = {}

  for (let idx = 0; idx < data.length; idx++) {
    const element = data[idx]
    const elementDate = formatDate(data.datetime, 'YYYY-MM-DD')

    if (elementsPerDay[elementDate] === undefined) {
      elsPerDay[elementDate] = []
    }

    elsPerDay[elementDate].push(act)
  })
  
  // Assign data to my reactive object
  Object.assign(elementsPerDay, elsPerDay)
})
...

return { ..., selectedDate, dateMatchable, elementsPerDay }

编辑：

使用计算所得的作品：

    const elementsPerDay = computed(() => {
      if (!data.value) {
        return {}
      }

      const elsPerDay = {}
      for (let idx = 0; idx < data.value.length; idx++) {
        const element = data.value[idx]
        const elementDate = formatDate(element.datetime, 'YYYY-MM-DD')

        if (elsPerDay[elementDate] === undefined) {
          elsPerDay[elementDate] = []
        }

        elsPerDay[elementDate].push(element)
      }

      return elsPerDay
    })

我意识到在Options API中，您需要在对象中 $ set（）新字段以使其具有反应性，但我认为 reactive（）会以某种方式做到这一点为了我。我错了吗？

Answer 1

Compoisition API插件不是Vue3。实际上，您遇到的是Vue 2的一个局限性：https://vuejs.org/v2/guide/reactivity.html#For-Objects。

您需要使用$set。

我在Github上发现了有关您的问题的问题：https://github.com/vuejs/composition-api/issues/334。

Vue Composition API-组件在开始时不使用react（）进行渲染

1 个答案: