英文:
Styles are not being applied with v-bind class in Vue 3
问题
我正在尝试对导航栏文本应用下划线，但它不起作用。
英文:
<template>
<a class="nav-link" :class="activeClasses" :href="page.link.url">
{{ page.link.text }}
</a>
</template>
<script>
export default {
props: ["page", "isActive"],
computed: {
activeClasses() {
return {
active: this.isActive,
emphasize: this.isActive,
};
},
},
};
</script>
<style scoped>
.emphasize {
text-decoration: underline !important;
}
</style>
I am trying to apply an underline to the navbar text but it is not working.
答案1
得分: 1
Your component works as expected. Seems you're passing wrong props to your component. Here it works just fine:
<script setup>
import Comp from './Comp.vue';
import { ref } from 'vue';
const active = ref(false);
</script>
<template>
<div>
<comp :is-active="active" :page="{ link: { text: 'example' } }"></comp>
</div>
<button @click="active = !active">Toggle</button>
</template>
英文:
Your component works as expected. Seems you're passing wrong props to your component. Here it works just fine:
<script setup>
import Comp from './Comp.vue';
import {ref} from 'vue';
const active = ref(false);
</script>
<template>
<div>
<comp :is-active="active" :page="{link:{text:'example'}}"></comp>
</div>
<button @click="active = !active">Toggle</button>
</template>
答案2
得分: 0
我同意Alexander的观点。你可能想要像这样修改你的props：
props: {
page: { type: String, default: '' },
isActive: { type: Boolean, default: false }
},
英文:
I agree with Alexander. You might want to modify your props like this:
props: {
page: { type: String, default: '' },
isActive: { type: Boolean, default: false }
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论