Implementing event handlers with 'v-on' on dynamically inserted content using 'v-html' in Vue

Question

Implementing event handlers with 'v-on' on dynamically inserted content using 'v-html' in Vue

Can Vue allow for the addition of v-on events on strings included in v-html? In this scenario, clicking the 'Maggie' link doesn't produce any action. It appears that it's not recognized by Vue.

Is there an alternative method to achieve this? I am currently using Vue.js version 2.1.3

Javascript

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', '<a href="#" v-on:click="click_user">Maggie</a>']
        },
        methods: {
            click_user: function() {
                console.log('Click user')
            },
        }
    })
}

HTML

<div id="app">
    <div v-for="user in users" v-html="user"></div><br>
    <a href="#" v-on:click="click_user">This works.</a>
</div>

javascript vue.js vuejs2

Answer 1

Answer №1

According to the information provided in the vue documentation:

The innerHTML of an element can be updated using the v-html directive. It is important to note that the content will be inserted as plain HTML and not compiled as Vue templates. If there is a need to create templates using v-html, it is recommended to reconsider the approach by utilizing components instead.

It should be noted that v-on will not function within v-html because it relies on Vue for functionality.

A Possible Resolution for Your Specific Issue

To conditionally display a link by using v-if, or else render plain text.

new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'Homer', clickable: false },
      { name: 'Marge', clickable: false },
      { name: 'Bart', clickable: false },
      { name: 'Lisa', clickable: false },
      { name: 'Maggie', clickable: true },
    ]
  },
  methods: {
    click_user: function() {
      console.log('Click user')
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.js"></script>

<div id="app">
  <div v-for="user in users">
    <div v-if="!user.clickable">{{user.name}}</div>
    <a v-if="user.clickable" href="#" v-on:click="click_user">{{user.name}}</a>
  </div>
</div>

Answer 2

According to the information provided in the vue documentation:

The innerHTML of an element can be updated using the v-html directive. It is important to note that the content will be inserted as plain HTML and not compiled as Vue templates. If there is a need to create templates using v-html, it is recommended to reconsider the approach by utilizing components instead.

It should be noted that v-on will not function within v-html because it relies on Vue for functionality.

A Possible Resolution for Your Specific Issue

To conditionally display a link by using v-if, or else render plain text.

new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'Homer', clickable: false },
      { name: 'Marge', clickable: false },
      { name: 'Bart', clickable: false },
      { name: 'Lisa', clickable: false },
      { name: 'Maggie', clickable: true },
    ]
  },
  methods: {
    click_user: function() {
      console.log('Click user')
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.js"></script>

<div id="app">
  <div v-for="user in users">
    <div v-if="!user.clickable">{{user.name}}</div>
    <a v-if="user.clickable" href="#" v-on:click="click_user">{{user.name}}</a>
  </div>
</div>

Answer 3

Answer №2

When using v-html to render

<a href="#" v-on:click="click_user">Maggie</a>

, the click event will not be bound. More information can be found in the official documentation. The v-on:click will simply render as an attribute.

It's recommended to keep a simple array of data and avoid using v-html. Instead, use either text or index with if (for one or two conditions) or switch (for multiple conditions) to trigger events.

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
        },
        methods: {
            click_user: function(text) {
              if(text=='Maggie') console.log('Click user')
            }
        }
    })
}

<div id="app">
   <div v-for="user in users" v-on:click="click_user(user)">{{user.name}}</div><br>    
</div>

Alternatively,

window.onload = function( ) {
  new Vue({
      el: '#app',
      data: {
          users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
      },
      methods: {
        click_user: function(index) {
          if(index==4) console.log('Click user')
        }
      }
   })
}

<div id="app">
   <div v-for="user,index in users" v-on:click="click_user(index)">{{user.name}}</div><br>    
 </div>

Answer 4

When using v-html to render

<a href="#" v-on:click="click_user">Maggie</a>

, the click event will not be bound. More information can be found in the official documentation. The v-on:click will simply render as an attribute.

It's recommended to keep a simple array of data and avoid using v-html. Instead, use either text or index with if (for one or two conditions) or switch (for multiple conditions) to trigger events.

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
        },
        methods: {
            click_user: function(text) {
              if(text=='Maggie') console.log('Click user')
            }
        }
    })
}

<div id="app">
   <div v-for="user in users" v-on:click="click_user(user)">{{user.name}}</div><br>    
</div>

Alternatively,

window.onload = function( ) {
  new Vue({
      el: '#app',
      data: {
          users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
      },
      methods: {
        click_user: function(index) {
          if(index==4) console.log('Click user')
        }
      }
   })
}

<div id="app">
   <div v-for="user,index in users" v-on:click="click_user(index)">{{user.name}}</div><br>    
 </div>

Answer 5

Answer №3

To enhance your code, consider creating a component and passing the user variable as a prop. Take a look at this example:

<users-list v-for="user in users" v-bind:user="user"></users-list>

For a functional demonstration, check out this link: https://jsfiddle.net/leocoder/tor13m26/1/

Avoid using v-html for this purpose as it is considered a bad practice.

Answer 6

To enhance your code, consider creating a component and passing the user variable as a prop. Take a look at this example:

<users-list v-for="user in users" v-bind:user="user"></users-list>

For a functional demonstration, check out this link: https://jsfiddle.net/leocoder/tor13m26/1/

Avoid using v-html for this purpose as it is considered a bad practice.

Implementing event handlers with 'v-on' on dynamically inserted content using 'v-html' in Vue

Answer №1

A Possible Resolution for Your Specific Issue

Answer №2

Answer №3

Similar questions

Pressing a key once causing two actions when managing content in a separate window

Convert the JSON data received from a jQuery AJAX call into a visually appealing HTML table

Using the "@" symbol as an alias in computed properties with Vue2

Preventing users from inputting the symbols "+" or "-" in a React JS input field

Reverse changes made to a massive object and then redo them

Angular code is malfunctioning and not delivering the expected results

What could be causing my Alert component to keep triggering repeatedly?

Increasing the nth-child Selector in Jquery

Module child-process not found

Should the Express.js router be required directly or stored in a variable before use?

An unassigned variable automatically sets the disabled attribute to true on an input field

How can you retrieve the original file name and line number in exceptions that are generated in Angular controllers?

Is there a way to bring together scrolling effects and mouse movement for a dynamic user

Transform an angular1 javascript circular queue implementation for calculating rolling averages into typescript

Implementing pagination using getServerSideProps in NextJS allows for dynamic

Mobile devices are unable to properly implement the Jquery show/hide feature

Avoid changing the regex pattern if it is surrounded by a specific character

Console displays null as the attribute value

show image with the help of jquery and ajax

Challenges arising from the rendering of main.js in Vue.js