Is it possible to trigger the @click event in Vuejs when utilizing v-html to render HTML content?

Here is an interesting HTML scenario:

errorText: '<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>';

I am trying to insert this string into the following div:

<div v-if="hasIssue !== {} && issue.is_issue" v-for="(issue, key) in hasIssue" :key="key" class="issues" v-html="errorText"></div>

Unfortunately, when using v-html to display it, I can see the button but the @click event doesn't work. I am looking for a solution to make it functional, any ideas?

javascripthtmlvue.jsonclickrender

Answer №1

It appears that you may not be using v-html correctly. Make sure to include the following code snippet:

<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>

within your div element.

<div v-if="hasIssue !== {} && issue.is_issue" v-for="(issue, key) in hasIssue" :key="key" class="issues">
  <a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>
</div>

Answer №2

Perhaps this solution could be beneficial:

<div
  v-if="hasError !== {} && error.is_error"
  v-for="(error, index) in hasError"
  :key="index"
  class="errors"
  v-html="errorMessage"
  @click="handleError(error)"
>
</div>

data: {
  hasError: [],
  errorMessage: `
    <button class="custom-button">
      Activate adjustable limits
    </button>
  `
},

methods: {
  handleError (error) {
    this.adjustLimits(error.mapping)
  },
  adjustLimits (mapping) {
    // logic goes here
  }
}

PS: Instead of using anchors for buttons, consider using actual buttons unless they are being used as links. This ensures better semantics and is the recommended approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue.js array dependencies

In Vue JS, I encountered an issue with empty arrays declared in the data. Initially, array A is populated with a hundred nested arrays. When a user interacts by clicking on a specific element, I need to extract the corresponding element from array A and pr ...

vue.js

Differences between jQuery and Google Closure in terms of handling AJAX

Recently, I've been exploring the Google Closure Library for handling ajax calls. I came across an example that piqued my interest: goog.events.listen(request, "complete", function(){ if (request.isSuccess()) { // perform a cool action } els ...

javascriptjqueryajaxgoogle-closure-library

Exploring Passportjs Callbacks and parsing arguments

I'm struggling to grasp the concept behind the custom callback in Passport.js. I'm not sure why it requires (req, res, next) at the end. Shouldn't these values be obtained from closure? app.get('/login', function(req, res, next) { ...

javascriptnode.jsexpresspassport.js

Dynamic count down using JavaScript or jQuery

I am looking for a way to create a countdown timer that I can adjust the time interval for in my database. Basically, I have a timestamp in my database table that might change, and I want to check it every 30 seconds and update my countdown accordingly. H ...

javascriptphpjquerylive

The filter function in JavaScript's Array is malfunctioning on Internet Explorer version 7

My web application includes a jQuery plugin that is functioning correctly in Internet Explorer 10 and 11. However, it is not working in IE 7. Upon investigation, I discovered that the value of the filter method is showing as undefined. The line of code th ...

javascriptjqueryasp.netwebinternet-explorer-7

Creating a versatile JavaScript library that is compatible with various platforms such as browsers, NodeJS, and single page applications like React

My question is: Is it possible to convert a basic file into a versatile library that can be utilized with Browsers (via script tag), Node JS, and Single Page Applications using a single codebase? In the past, I have primarily used existing libraries witho ...

javascriptnode.jsnpmsingle-page-application

Use PipeTransform to apply multiple filters simultaneously

Is it possible to apply multiple filters with PipeTransform? I attempted the following: posts; postss; transform(items: any[]): any[] { if (items && items.length) this.posts = items.filter(it => it.library = it.library ...

javascriptangulartypescriptionic-frameworkionic2

What is the process for rendering a React class component using React HashRouter and Apollo client?

I've run into an issue with my project that involves using only React class components and fetching data from an Apollo server. The problem I'm facing is that, in Chrome, only the Navbar.jsx component is rendering. Even when I navigate to one o ...

javascriptreactjsreact-router-domapollo-clientreact-class-based-component

Having trouble with Firefox not displaying the image source with an absolute path

ASP.NET Application I am experiencing some confusion with displaying images. While Internet Explorer shows the images correctly, Firefox is not showing them on the production server. The image url generated on the server is: \chartings\charts& ...

htmlpathimageabsolute

What is the best way to create dynamic .env files that can easily adapt to different environments instead of

Having multiple .env files (one for Vue and one for Laravel) with 'localhost' hard coded in them is causing accessibility issues from other computers on my network. It would be beneficial to have this set up dynamically, except for production. F ...

javascriptphplaravelvue.js

Why does getElementById work when getElementsByClassName doesn't?

I created a script with the purpose of hiding images one and two, while keeping image 3 visible and moving it into their place. The script functions correctly when using div Id's instead of div Classes. However, I prefer to use div classes for groupin ...

javascripthtmlcssfunctiongetelementsbyclassname

I am experiencing issues with my PHP quiz application; it is malfunctioning when I try

In my PHP MySQL quiz application, I have developed two sections: one for students and another for admins. In the admin area, there is an "addquestion" page where the code is as follows: <form class="form-horizontal " action="addquestion.php" method=" ...

phphtmlcssmysql

Create a randomized item for experimentation in NodeJs using an interface

Looking for a NodeJs package that can generate fake data in all required fields of a complex object described by a set of typescript interfaces, including arrays and sub-interfaces. Any recommendations? ...

javascriptnode.jstypescriptunit-testing

Exclusive to Firefox: The left and right arrows will shift the entire page

I've encountered a strange issue with my website that only seems to be occurring in Firefox. When using the mouse scroll, I am able to move up and down as expected. However, when using the arrow keys, the entire page shifts to the right in approximate ...

htmlcssfirefoxweb

Tailored NodeJS compilation incorporating JavaScript modules

Can NodeJS be built together with specific JavaScript modules? I am aware that for native modules, node-gyp can assist with this, but I am unsure about how to accomplish this with JavaScript modules. My goal is to use a custom application without needing t ...

javascriptnode.jsnode-gyp

Executing a series of functions in succession using jQuery

I am trying to iterate through an object that contains functions which need to execute consecutively. Ideally, I would like these functions to be chained together in a way where one function waits for the previous one to finish before executing (e.g., func ...

javascriptjqueryfunctionloopscallback

The change handler of the TS RadioGroup component, instead of returning an array of possible strings, returns a unique

My interface declaration for StopData is shown below: export interface StopData { stopName: string, stopType: 'stop' | 'waypoint' } I have implemented a radio group to choose the 'stopType', which consists of two radi ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Utilizing Javascript / jQuery to eliminate specific CSS styles

I am facing an issue with the CSS code for a table positioned at the bottom of the screen. The current code includes a filter specifically for IE 8, but I need to make it compatible with IE 10 as well by removing the filter and adding a background color. ...

javascriptjquerycssinternet-explorer-10css-tables

Component re-rendering and initializing useReducer

I made some revisions to this post. Initially, I shared the entire problem with my architecture and later updated it to focus directly on the issue at hand in order to make it easier for the community to provide assistance. You can now jump straight to the ...

javascriptreactjstypescriptuse-reducer

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

htmlcss