What are the steps to include a string into Vue and then assess its value?

Where should I define a function in a SPA using the options API that will be called from an HTML href?

Check out this demo on Codepen where everything works fine:

CODEPEN

However, when I try to implement it in my single-page application:

    <template>
        <div v-html="my_div" />
    </template>
    
    <script>
    /* function MyFunction() {
      alert();
    }; */
    
    const MyFunction = () => {
      alert();
    };

   /* Just for explanation, because the data comes from the database
   export default {
    data() {
      return {
        my_div:'<a href="javascript:MyFunction(10)">link call function</a> ',
      }
    }
  */
}
    </script>

When trying to call the function, I receive the following error:

Uncaught ReferenceError: MyFunction is not defined

It seems that the function is defined after the call. Any suggestions on how to solve this issue?

Answer №1

Uncertain of the intention behind this action, it is not advisable to process an unknown string in an unconventional manner as it will likely result in dysfunctionality and difficulty in troubleshooting.

If your project carries a history of outdated practices and accumulated technical debt, consider either refactoring it or resorting to using jQuery or similar tools to temporarily address the issue.

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

JQuery syntax for adding a comma before the first element in an array

When I insert data into an array, the output in my console includes a comma before the first element (9). How can I remove this comma from the first element using the provided code snippet? ,9,My firstname,My lastname,<a href="/cdn-cgi/l/email-protecti ...

Creating an expo apk using eas buildWould you like a tool for generating

Following an update to Expo, the process of building apk files using expo build:android -t apk is no longer supported. Instead, it now recommends using eas builds with the command eas build -p android --profile preview. However, this resulted in building a ...

AngularJS: resolving route dependencies

I have a variable $scope.question that contains all the questions for the page. My goal is to loop through the questions page by page. To achieve this, I created a function called questionsCtrl and I am calling this function in the config while setting up ...

Removing data with sweetalert in a Ruby on Rails application

Hey there, I'm currently exploring the use of sweet alert js to enhance the appearance of my alert boxes. In my table, I have a specific data deletion feature that is triggered by a standard JavaScript alert confirmation. However, when attempting to i ...

Building a High-Performance Angular 2 Application: A Comprehensive Guide from Development to

Recently, I began developing an Angular2 project using the quickstart template. My main concern now is determining which files are essential for deployment on my live server. I am unsure about the specific requirements and unnecessary files within the qu ...

How to send two different types of data using jQuery/AJAX to a .php file? (Syntax)

I am completely new to the world of jQuery/AJAX and I could really use some guidance. Here is the code snippet in question: $(function () { $('.button').on('click', function (event) { event.preventDefault(); //prevents ...

Creating a personalized image download feature in PhotoSwipe.js

I am currently working on a project that involves using the PhotoSwipe gallery. At line 175, there is code url:items[0].hqImage. I want to use the index of the current image instead of 0. How can I achieve this? I attempted to utilize the pswp.listen(&ap ...

Update class name in React component based on state change

My current setup involves the setting of active and class flags as shown below: constructor(props) { super(props); this.state = {'active': false, 'class': 'album'}; } handleClick(id) { if(this.state.active){ this.s ...

Create an interface that inherits from another in MUI

My custom interface for designing themes includes various properties such as colors, border radius, navbar settings, and typography styles. interface ThemeBase { colors: { [key: string]: Color; }; borderRadius: { base: string; mobile: st ...

Passing a variable between pages in PHP: a simple guide

In my *book_order* page, I allow users to input orders into a table called *order_management*. The order_id is auto-incremented in this table. After submitting the page, I need to pass the order_id to another page named *book_order2* where products can be ...

Having difficulties grasping the concept of how to communicate effectively with my MySQL database

Apologies in advance for asking a question that may have been answered elsewhere, but I've been struggling for hours to transfer the information into my own program. Despite my attempts, I always encounter the same obstacles. So, I decided it would be ...

Rails 4 does not properly handle the execution of Ajax responses

Currently, I am incorporating ajax functionality within my Rails application. Within the JavaScript file of my application, the following code snippet is present: $('#request_name').on('focusout', function () { var clientName ...

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for e ...

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

The error message "Invalid Data Type: Not an Array - google charts" was encountered

I am struggling with an ajax call that I have set up. The issue arises when passing an array from the backend to the frontend. Upon checking the data through an alert on the frontend, everything seems fine. However, Google charts raises an error stating th ...

Evaluating the generated HTML using JavaScript and Selenium testing

I am a new user of Selenium using C# and I want to automate the login process on a third-party website. When I manually navigate to the page in Chrome and inspect the elements, I can see the text boxes for username and password. <input type="text" id=" ...

Locating the source of the function call within a file in Node.js

Is it possible to determine the location of a file if a method from a module is called within that file? For example: // my-module.js module.exports = { method: function () { // I would like to know the path to my-app.js here } } // my-other-mod ...

Vue's v-for loop updates all input fields instead of just one, ensuring consistency across the board

After spending hours on this issue, I am still stuck and unable to find a solution through Google search. The problem lies in my v-for loop where I am iterating over an array of objects. Each iteration renders input fields displaying the name and price of ...

php After the ajax request, the array_push function is failing to add values to the

I am having trouble with my ajax and php implementation. I want to append an array every time an ajax call is made, but it doesn't seem to be working. Here are the codes I am using: $('#multiple_upload_form' +count).ajaxForm({ ...

Revive the JavaScript library for handling mouse wheel events

Utilizing the wheel-indicator JavaScript library, I am looking to revert the mouse wheel event back to its original state after it was initially set to preventDefault(). Despite attempting to use indicator.setOptions({preventMouse:"false"}) as suggested b ...