The v-on:click functionality seems to have become unresponsive after being dynamically added through modifying the inner

Question

The v-on:click functionality seems to have become unresponsive after being dynamically added through modifying the inner

While attempting to create a dynamic navbar, I encountered an issue. The goal was to have the navbar switch from displaying "login" and "register" when a session is logged in, to showing "profile" and "logout". The buttons for login and register were functioning correctly but when changing them using innerHTML in JavaScript, they no longer triggered the v-on:click function.

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>`;

javascript vue.js vuejs2

Answer 1

Answer №1

Utilize Vue.js to dynamically manipulate the DOM by using v-if/else or v-show/hide directives to conditionally show or hide elements within the HTML structure.

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>

Answer 2

Utilize Vue.js to dynamically manipulate the DOM by using v-if/else or v-show/hide directives to conditionally show or hide elements within the HTML structure.

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>

The v-on:click functionality seems to have become unresponsive after being dynamically added through modifying the inner

Answer №1

Similar questions

Removing classes from multiple elements on hover and click in Vue 2

Having trouble with importing a TypeScript class: encountering a "cannot resolve" error message

Modifying the appearance of Bootstrap button colors

JavaScript code to read a .txt file

Invoke a function within one component using another component

What is the best way to retrieve a particular variable from an ng-repeat loop?

Using discord.js does not allow line breaks in embed descriptions

v-show is not functioning properly

I wonder where the file from the HTML form download has originated

Opt for JavaScript DOM manipulation over jQuery for element selection without depending on jQuery

Do not display the outcome of the unsuccessful Ajax registration attempt

Adjust an UpdatePanel with client-side code triggering server-side operations

Performing a multitude of if statements simultaneously consistently results in an undefined outcome after the sixth iteration

Encountered an error while reloading the page: "Unable to read property 'ArtisanID' of undefined."

Retrieve the string data from a .txt document

Unsuccessful attempts to animate with Jquery in Google Chrome are persisting

Gutenberg NPM remains in its original state without any alterations

Node.js - CSRF Protection Token Undefined

How can I iterate over an array in JavaScript to create posts for an HTML feed using Bootstrap?

Challenges with handling Ajax responses in Ruby on Rails