Vue composition api - component doesnt render at start using reactive()

Question

Just started using Vue composition-api (with Vue2) and I ran into some reactivity? problem.

In the template, I want to render list of elements based on selected date.

My template:

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

Now the problem is that when the component is created and data are fetched, nothing is rendered and elementsPerDay are empty (in the template). Once I force template update (for example by calling vm.$forceUpdate()) everything works fine.

My setup:

...
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 }

EDIT:

Using computed works:

    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
    })

I realize that in Options API, you needed to $set() new fields in object for it to be reactive but I thought that reactive() somehow does this for me. Am i wrong?

tony19 · Accepted Answer · 2022-07-15 02:19:06Z

1

Compoisition API plugin is not Vue 3. Actually, what you encounter is a limitation from Vue 2 : https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects.

You need to use $set.

I found an issue about your problem on Github: https://github.com/vuejs/composition-api/issues/334.

edited Jul 15, 2022 at 2:19

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 8, 2020 at 10:09

Thomas Betous

5,2132 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VAdaihiep · Accepted Answer · 2021-10-26 09:01:11Z

1

If you're using https://github.com/vuejs/composition-api, you can use $set() by:

import { set } from '@vue/composition-api'
...

setup() {
  set(object, 'key', 'value');
}

answered Oct 26, 2021 at 9:01

VAdaihiep

5319 silver badges21 bronze badges

Collectives™ on Stack Overflow

Vue composition api - component doesnt render at start using reactive()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related