After using @click.prevent method in vue, the page does not display the content
Can anyone figure out where the problem might be coming from? ? I don't get any errors, but the page shows no content I'm trying to display the content of a page without navigating to the page, but when I click on the links it doesn't display them
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li v-for="(value, index) in pages" class="nav-item" :key="index">
<a class="nav-link active"
aria-current="page"
:href="value.link.url"
:title="`This link goes to the ${value.link.text} page`"
@click.prevent ="activePage = index"
>{{value.link.text}}</a>
</li>
</ul>
</div>
</nav>
<div id="content" class="container">
<h1>{{ pages[activePage].pageTitle }}</h1>
<p>{{ pages[activePage].content }}</p>
</div>
<script>
const { createApp} = Vue
createApp({
setup() {
return {
activePage: 0,
pages:[
{
link: {text: 'Home', url:'index.html'},
pageTitle : 'Hello, Vue',
content: 'Welcome to the world of vue'
},
{
link: {text: 'Link', url:'link.html'},
pageTitle : 'Hello, Vue',
content: 'This is the link text'
},
{
link: {text: 'Contact', url:'contact.html'},
pageTitle : 'Hello',
content: 'This is the contact page'
}
]
}
}
}).mount('body');
</script>
</body>
</html>
