Vue 3:将ref值绑定到对象属性

Question

我遇到了一个问题，我试图使用新的复合API将object属性绑定到Vue中的ref。我期望模板在设置ref值之后用新值重新呈现，但是我将得到一个RefImpl {}。我该怎么解决这个问题？

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

Answer 1

你的社会变量不会在模板中撤销内部参考文献。基本上，您必须在模板中使用social.value.value。所以我认为重命名这个变量会更好

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

这样你就可以做social.variable.value。

Vue docs的详细信息：

• 注意，解包装只适用于顶级属性--对refs的嵌套访问不会被打开：阅读更多。

Answer 2

看起来您的代码工作：

​

const { onMounted, ref } = Vue
const app = Vue.createApp({
  setup() {
    const testVariable = ref(0);
    const socials = [{ value: testVariable, }];
    onMounted(() => {
      setTimeout(() => testVariable.value = 100, 1000);
    });
    return { socials, }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
   <div v-for="(social, index) in socials" :key="index">
     <p>{{ social.value }}</p>
   </div>
</div>

​