英文:
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 }},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论