英文:
On vue 3 v-if not working for ref value returned from composable
问题
我创建了一个带有响应式布尔值的可组合对象。出于某种原因，在模板的v-if中，响应式布尔值只能与.value一起使用。它不会在模板内自动解包。
但是，如果我直接在Vue组件上使用布尔引用，它会起作用。我在这里复制了它。
代码：
// useToggle.ts 文件
import { ref } from "vue";
const visible = ref(true);
export function useToggle() {
function toggle() {
visible.value = !visible.value;
}
function close() {
visible.value = false;
}
return {
visible,
toggle,
close,
};
}
// App.vue 文件
<script setup lang="ts">
import { ref } from "vue";
import { useToggle } from "./useToggle";
const visible = ref(true);
const t = useToggle();
</script>
<template>
<button @click="visible = !visible">切换本地</button>
<div v-if="visible">本地</div>
<button @click="t.toggle">切换全局不使用.value</button>
<div v-if="t.visible">全局（这不起作用）</div>
<div v-if="t.visible.value">全局（这不起作用）</div>
{{t.visible}}（但这个会更新）
</template>
我不明白为什么v-if不起作用相同。我该怎么做才能使可组合对象像本地引用一样工作？
英文:
I created a composable with a reactive boolean. For some reason, the reactive boolean only works with .value in the template v-if. It doesn't automatically unwraps it inside the template.
But if I use a boolean ref directly on the vue component, it works. I reproduced it here
The code:
// useToggle.ts file
import { ref } from "vue";
const visible = ref(true);
export function useToggle() {
function toggle() {
visible.value = !visible.value;
}
function close() {
visible.value = false;
}
return {
visible,
toggle,
close,
};
}
// App.vue file
<script setup lang="ts">
import { ref } from "vue";
import { useToggle } from "./useToggle";
const visible = ref(true);
const t = useToggle();
</script>
<template>
<button @click="visible = !visible">toggle local</button>
<div v-if="visible">local</div>
<button @click="t.toggle">toggle global without value</button>
<div v-if="t.visible">global (this doesn't work)</div>
<div v-if="t.visible.value">global (this doesn't work)</div>
{{t.visible}} (but this, updates)
</template>
I don't understand why the v-if doesn't work the same. What can I do to make the composable work like the local ref?
答案1
得分: 1
只有当ref是模板渲染上下文中的顶级属性时才适用解包。如果ref是文本插值的最终评估值，它也会被解包。
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-templates
英文:
The unwrapping only applies if the ref is a top-level property on the template render context.
And ref will also be unwrapped if it is the final evaluated value of a text interpolation.
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-templates
答案2
得分: 0
<script setup lang="ts">
import { ref } from "vue";
import { useToggle } from "./useToggle";
const visible = ref(true);
const { visible: v, toggle } = useToggle();
</script>
<template>
<div>composable state: {{ v }}</div>
<div :style="{ display: 'flex' }">
<div>
<button @click="visible = !visible">toggle local</button>
<div v-if="visible">local</div>
</div>
<div>
<button @click="toggle">toggle global with value</button>
<div v-if="v">toggle works here</div>
</div>
<div>
<button @click="toggle">toggle global without value</button>
<div v-if="v">toggle broken here</div>
</div>
</div>
</template>
英文:
<script setup lang="ts">
import { ref } from "vue";
import { useToggle } from "./useToggle";
const visible = ref(true);
const {visible:v,toggle} = useToggle();
</script>
<template>
<div>composable state: {{v }}</div>
<div :style="{ display: 'flex' }">
<div>
<button @click="visible = !visible">toggle local</button>
<div v-if="visible">local</div>
</div>
<div>
<button @click="toggle">toggle global with value</button>
<div v-if="v">toggle works here</div>
</div>
<div>
<button @click="toggle">toggle global without value</button>
<div v-if="v">toggle broken here</div>
</div>
</div>
</template>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论