CODEWITHSUNDEEP
node.jsvue.jsvuejs3ref
Basse
Basse

Reputation: 21

Vue 3: Bind ref value to object property

I'm running into an issue where I'm trying to bind an object property to a ref in Vue, using the new composition API. I'm expecting the template to re-render with the new value after setting the ref value, but I'm however getting a RefImpl {} instead. How would I solve this?

<template>
  <v-card>
   <v-card-text class="pa-2">
     <div v-for="(social, index) in socials" :key="index">
       <p>{{ social.value }}</p>
     </div>
   </v-card-text>
  </v-card>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api/dist/vue-composition-api";

export default {
  setup() {
    const testVariable = ref(0);

    const socials = [
      {
        value: testVariable,
      }
    ];

    onMounted(() => {
      setTimeout(() => testVariable.value = 100, 1000);
    });

    return {
      socials,
    }
  },
}
</script>
<style scoped></style>

Upvotes: 2

Views: 11125

Answers (1)

Rago
Rago

Reputation: 436

Your socials variable does not unref inner refs in template. Basically what you have to do in your template is using social.value.value. So I think renaming that variable would be better to something like

   const socials = [
      {
        variable: testVariable,
      }
    ];

So that you could do social.variable.value.

Details from Vue docs:

  • Note the unwrapping only applies to top-level properties - nested access to refs will not be unwrapped: Read More

Upvotes: 0

Related Questions