Incorporate an Event into a Vue.js JavaScript string within an HTML file

I am attempting to trigger the event in a JavaScript string.

Within the buffer, I have called this event:

@click.prevent = "Buy($event)"

However, the browser is not interpreting it correctly:

https://i.sstatic.net/uHs8W.jpg

Here is the code snippet:

JavaScript:

    var buffer="";
    for(let i=0 ;i < Object.keys(result).length;i++) {
        buffer += "<div class='category-item'><a class='button-product-info-s' href='/product/"+result[i]['id']+"'/><img class='product-img-s' src='"+result[i]['pic_url'] +"'></a><p class='product-name-s'>"+result[i]['name']+"</p><a @click.prevent='Buy(event)' href=''  class='btns btn-primarys btn-buy-s' value='"+result[i]['id']+"'>Buy</a></div>";
    }
    this.codes= buffer;

//Buy function

Buy:function (event) {
    element= event.currentTarget;
    value = element.getAttribute('value');
            }

HTML:

    <div v-html="codes"></div>

The issue is that the browser does not recognize that the event is triggered on the <a> tag and not an attribute

result represents my API data.

Answer №1

My suggestion would be to use

@click.prevent = "Buy($event.target.value)"
instead of just $event. To accurately pinpoint the issue, it would be helpful to see more code related to the Buy method.

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

Sending a massive video file to a node.js server and saving it in AWS S3 with ReactJS

I am currently in the process of creating an OTT platform, but I have encountered a problem while attempting to upload large files to the server. I initially attempted to store the file in a temporary folder using multer and then utilize aws-sdk s3.upload. ...

Error: Discord bot encountered a TypeError while attempting to access the property 'id' of an undefined value

After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

I am looking to utilize the data from a POST request to dynamically update the DOM through a script.js file. How can

After sending a post request, I am looking to update my database and then use an array to dynamically update the HTML content. However, I am struggling with how to pass this data to my script.js file. Here is my progress so far: SERVER let expenseAmo ...

Notification of failed fetch in backbone

We are experiencing a problem with our backbone application. Our goal is to show a notification to the user when a fetch fails (due to timeout or general error). Instead of displaying an error message on a new page, we want to overlay a dialog on top of th ...

Can loading HTML and js through ajax be considered secure?

I am currently utilizing the Jquery load function $('#result').load('test.php'); in order to dynamically load a page within another page when clicking on a tab. The page being loaded contains javascript, php, and a form. Upon inspecting ...

Tips for preventing conflicts between variables and functions in JavaScript (no need for a jQuery plugin)

How can I prevent variable and function conflicts in Javascript without relying on jQuery plugins? I am interested in creating my own functions but want to avoid conflicts. I believe using function scope, where functions are used solely for the purpose of ...

Images with spaces in their names are failing to load in React Native

I am currently trying to utilize an image within my react native application. At this point, my code is very minimal. The following code snippet is all I have for now: import React from 'react'; import { ScrollView, View, Text } from 'reac ...

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

Using VueJS to Create a Range of Years from 1900 to Present Year

I'm currently developing a registration form using VueJS, wherein users need to input their date of birth. My challenge is in generating a list of years starting from 1900 up to the current year within a <select> element. Any suggestions on how ...

What is the proper location to insert CSS within Laravel?

What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...

Setting the row ID value after performing form editing in free jqGrid

In the table, there is a primary key with 3 columns (Grupp, Kuu, Toode), and the server returns an Id created from those columns. When the primary key column is changed in form editing, the server sends back a new row id. However, Free jqgrid does not se ...

Building a single-page app optimized for mobile viewing with Foundation framework

Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...

Is it possible to animate the innerHTML of a div using CSS?

In my HTML file, I have these "cell" divs: <div data-spaces class="cell"></div> When clicked, the innerHTML of these divs changes dynamically from "" to "X". const gridSpaces = document.querySelectorAll("[data-spaces]"); f ...

Tips for testing parallel, mocked data requests in JEST by simulating cached responses with a 500ms limit

In order to simulate parallel requests fetching data from different sources, I have implemented tests that introduce artificial latency for each request. The goal is to return a simple string with an identifying digit to determine whether the data has been ...

Converting DateTime objects into JSON format for use in AJAX calls

When utilizing my AJAX method, it returns a view model that is serialized as a data structure using JavaScriptSerializer().Serialize(). Among this data are several nullable DateTime? properties. I recently discovered that these dates appear in JavaScript ...

Exploring the world of data manipulation in AngularJS

Seeking to comprehend the rationale behind it, I will share some general code snippets: 1) Fetching data from a JSON file using the "loadData" service: return { myData: function(){ return $http.get(path + "data.json"); } } 2) ...

Check if the form field uses Jquery

How can you use Jquery or plain javascript to determine if something is a form field? For example: <div id='some_id'></div> or: <input type='text' id='some_id'> Is there a method to check $('#some_id ...

Scrolling with Buttons in both Right and Left directions

I am working with three divs: left, middle, and right. The middle div will contain content, while the left and right divs are designated for buttons that will scroll the middle div. Specifically, I plan to display lists of pictures in the middle div. If a ...

Updating every occurrence of a string in the visible text of a webpage: A step-by-step guide

I need to include the registered trademark symbol beside all mentions of a brand, which I'll refer to as "SomeBrand", on a client's website. Here is my current approach: function updateSomeBrand(){ var elements = document.getElementsByTagName( ...