计算属性类星体无法正常工作

Question

所以在我的 quasar 项目中，我的脚本设置如下所示：

import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
import { useCategories } from "src/stores/categories.js";
const props = defineProps({
item: Object,
});
const { getCategoryTags } = useCategories();
const fullTags = getCategoryTags(props.item.tags);
const { width } = useWindowSize();
const btnWidth = computed(() => (width > 600 ? "Add to cart" : "Add"));

在我的模板中，我有这两个按钮：

        <q-btn class="btn btn--primary text-black" style="background: red">
      {{ btnWidth }}
      <q-icon
        name="ti-shopping-cart"
        color="white"
        class="q-ml-sm"
      ></q-icon>
    </q-btn>
    <q-btn class="btn btn--secondary">
      {{ btnWidth }}
      <q-icon name="ti-heart" color="white" class="q-ml-sm"></q-icon>
    </q-btn>

现在，我的问题是，在页面上，输出的是“添加”而不是“添加到购物车”，并且无论我调整页面大小或更改宽度多少，它都会保持“添加”，这是为什么以及如何我可以修复它，让它显示“添加到购物车”，当我最小化页面时它显示“添加”？

Answer 1

尝试使用 .value 并返回宽度参考：

const btnWidth = computed(() => (width.value > 600 ? "Add to cart" : "Add"));