“内容多-少”Nuxt/Vue 组件不起作用

问题描述 投票:0回答:1

我创建了一个简单的“more-less text”组件,它基于 Tailwind hidden 类和绑定的 more 变量。代码如下:

<!--  More.vue -->
<template>
  <section :class="{ hidden: more }">
    <slot /><!-- long content will be inside -->
    <p class="cursor-pointer" @click="toggle"> less </p>
  </section>
  <p :class="{ hidden: !more }" class="cursor-pointer" @click="toggle"> more </p>
</template>

<script setup>
let more = ref(true);

function toggle() {
    more = !more;
    console.log(more); // true, false - as expected
}
</script>

该组件在其他地方使用如下:

<template>
    Always visible content.
    <More>Some long content with toggled visibility.</More>
</template>

我看到正确的控制台输出然后进行测试。但其余“更多”内容部分并未出现。怎么了?

binding nuxt.js components vue-component tailwind-css
1个回答
0
投票

你应该使用

more.value = !more.value;

因为

more
参考

© www.soinside.com 2019 - 2024. All rights reserved.