CODEWITHSUNDEEP
vue.jsvuexvuejs3quasar-frameworkvue-composition-api
eeerrrttt
eeerrrttt

Reputation: 606

vue composition API - computed property inside ref variable

I have the following code:

    <template>
      <div class="row flex justify-center w-full h-full" style="min-height: 320px;>
       <q-select style="min-width: 92px;" class="w-full" outlined :options="options" label="Número de parcelas" emit-value map-options v-model="installments"></q-select>
      </div>
  </template>

    <script>
    import { useQuasar } from 'quasar'
    import { useStore } from 'vuex'
    import { defineComponent, ref, computed } from 'vue'
    
    export default defineComponent({
      name: 'PageIndex',
      components: {
        loading
      },
    
      setup () {
        const store = useStore()
        const $q = useQuasar()
        let installments = ref(12)
        const product = computed(() => {
          return store.getters['checkout/getCheckoutProduct']
        })
        let options = ref([
          {
            label: `12x de R$ ${(product.value.price / 12)}`,
            value: 12
          },
          {
            label: `11x de R$ ${(product.value.price / 11)}`,
            value: 11
          }
        ])
        return {
          product,
          options,
          installments
          }
      }
    })
    </script>

The problem is that is returning UNDEFINED, even product.value.price correctly showing inside VUE devtools inside my vuex. Also, other places on component are getting the product value, but... the 'options' do not work.

Note that options have the variable inside it, how can i pass a variable from computed to the ref() variable ?!

Upvotes: 1

Views: 5034

Answers (1)

Cianekjr
Cianekjr

Reputation: 374

Ref will be invoked only one time. It is used in setup, so it works like onCreated hook. You should have used computed property. It calculates reactive content.

Check my demo:

https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-4u0lj?file=/src/views/Home.vue

Upvotes: 3

Related Questions