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

Retrieve the value from every dynamically generated text box by its corresponding number

Struggling to display the array after adding a new item with the push method

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

Tips for retrieving the slug value in getStaticProps for invoking the API with the slug as a parameter

Initiate node.js execution upon system boot

Obtaining an XML element within an XSLT transformation

React - Paths of images converting to relative when directly accessed via the address bar

Tips for handling the user's logged-in status in NativeScript Vue

Configuring a Meteor.js application requires defining variable scopes for templates in order to manage

What could be causing my component to not update after I modify the states?

Enhancing user experience with dynamic element integration in jQuery's AutoComplete feature

moment.js is unable to extract the time information from a timestamp

What techniques can I implement with puppeteer to efficiently warm up the cache?

The bi-directional data binding in Vuex-ORM is unable to monitor changes within a nested object

Transmit information from a Vue.js application to a Laravel application

Is it advisable to load 10,000 rows into memory within my Angular application?

Encountering npm install failure post updating node version

Having trouble implementing table row selection with semantic-ui table

Unable to reset iframe style height in IE8 using JavaScript

Value as a String inside an Object