时间戳

首页 > 解决方案 > v-on:通过更改innerhtml添加后点击不起作用

javascript - v-on:通过更改innerhtml添加后点击不起作用

问题描述

我试图制作一个动态导航栏，其作用如下：如果会话已登录，则将导航栏从登录和注册更改为配置文件并注销，登录和注册按钮工作正常，但是通过 js 更改它们时innerHTML 他们不执行功能 v-on:click

var nav_auth = document.getElementById("nav_auth");
nav_auth.innerHTML = `
    <li class="nav-item">
        <a class="nav-link" href="?profile"><i class="fas fa-user-circle user-circle-icon"></i> ` +
            this.user.name +
        `</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="?logout" v-on:click="logout()"> Logout </a>
    </li>`;

标签： javascriptvue.jsvuejs2

解决方案

让vue改变dom。使用 v-if/else（或 v-show/hide）有条件地渲染（或包含）dom 中的元素。 

new Vue({
  el: '#example',
  data: {
    user: true,
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<html>

<body>
  <div id="example">
    <div v-if="user">
      <button @click="user=!user">Logout</button>
      <button>Profile</button>
    </div>
    <div v-else>
      <button @click="user=!user">Login</button>
    </div>
  </div>
</body>

</html>

推荐阅读