suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Nach Verwendung der @click.prevent-Methode in Vue wird der Inhalt auf der Seite nicht angezeigt

Kann jemand herausfinden, woher das Problem kommen könnte? ? Ich erhalte keine Fehlermeldungen, aber die Seite zeigt keinen Inhalt an Ich versuche, den Inhalt einer Seite anzuzeigen, ohne zur Seite zu navigieren, aber wenn ich auf die Links klicke, werden sie nicht angezeigt 

<!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>
P粉111927962P粉111927962496 Tage vor641

Antworte allen(1)Ich werde antworten

  • P粉627027031

    P粉6270270312023-09-17 20:11:52

    问题在于activePage不是响应式的。将其创建为ref，使其能够对变化做出响应。

    const { createApp, ref } = Vue;

createApp({
  setup() {
    const activePage = ref(0);

    return {
      activePage,
      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("#app");
    <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>

<div id="app">
  <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>
</div>

    Antwort
    0
  • StornierenAntwort