I am currently having issues with the mustache syntax in vuejs, as it is not functioning properly

Having an issue with Vue.js where the mustache syntax isn't working properly.

<!DOCTYPE html>
<html>
    <head>   
        <title>index</title>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dea8abbb9eecf0e8f0efea">[email protected]</a>"></script>
        <script>
           
            const app = new Vue({
              el: '#app',
              data: {
                  message: "hello",
              },
            })
          </script> 
    </head>
    <body>
        <div id="#app">
            <h5>{{message}}</h5>
        </div>
       
    </body>

</html>

View screenshot here

Answer №1

Make sure to use <div id="app"> instead of <div id="#app">, and place the script containing the Vue instance at the end of the body element:

<!DOCTYPE html>
<html>
    <head>   
        <title>index</title>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d2d1c1e4968a928a9590">[email protected]</a>"></script>
        
    </head>
    <body>
        <div id="app">
            <h5>{{message}}</h5>
        </div>
        <script>
           
            const app = new Vue({
              el: '#app',
              data: {
                  message: "hello",
              },
            })
          </script>
    </body>

</html>

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

"When attempting to upload an image from the front end, the issue arises that req.file

I have been troubleshooting this issue by referring to similar posts, but I am still facing the problem of getting 'undefined' when using console.log. I have followed instructions for defining the multer middleware from other sources, so I am uns ...

Failure to receive results from $.getJSON request

I am currently working on developing a web page that allows users to search and retrieve Wikipedia pages based on their search results. Below is the relevant HTML code for the search feature: <form class='search-form' onsubmit='return f ...

Deliver transcluded data to the descendant element of a hierarchical roster

I understand that there have been similar questions asked before, but my situation is slightly different. I am currently constructing a nested list and I want to include custom HTML content in each grandchild element alongside some common HTML. The problem ...

Tips for triggering onclick before changing to a new page?

Currently, I am developing a React application and have encountered the following situation: <a href={link} variant="primary" onClick={this.onClickDoSomething}> here. </a> My goal is for the onClick event to trig ...

Error: The function user.comparePassword does not exist or is not defined

I am facing an error that says TypeError: user.comparePassword is not a function. I have ensured that all dependencies are installed and the APP is linked to all the libraries. I tried using Postman to retrieve data, but it doesn't seem to be workin ...

Guide on how to dynamically add AJAX JSON array response to an HTML table

Hey! I need some advice on how to dynamically append a JSON Array response to an HTML table after submitting a form using AJAX. Here's the scenario: This is my form : <form id="myForm" method="POST"> <input type=" ...

Managing asynchronous data in various locations using Vuex modules

I'm struggling to grasp the correct usage of Vuex and whether it's necessary in my situation. Imagine I have a basic online shop consisting of two components: Product list. Product filtering. If I don't use Vuex: I can create Filtering as ...

Dynamic class/interface in Typescript (using Angular)

Is there a way to achieve intellisense for an object created with a dynamic class by passing parameters? Here is the code snippet: Main: let ita: any = new DynamicClass('ITA'); let deu: any = new DynamicClass('DEU'); The DynamicClass ...

Using the onclick attribute as a unique identifier for a button

I am currently facing a challenge with a form that does not have an ID Here is the code snippet in question: <button class="btn btn-primary" onclick="showModal()" type="button">Browse Data</button> Unfortunately, I don't have any contro ...

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

A scenario I am working on involves a Login jsp that accepts a user email and sends it to a servlet. If the provided email is not found in the database, the servlet redirects back to Login.jsp with an attribute "error". Within the header of Login.jsp, ther ...

Transforming a JSON object into a list in C#

After exploring similar posts without success, I am reaching out here for help. I have a Json data stored in a hidden field that I am trying to access in the code behind file of my markup page. My goal is to convert this Json into a List and bind it to a ...

Executing a query with a `has many` relationship in MongoDB: Step-by-step guide

In my setup with Node, Express, and backbone, I am successfully retrieving records from MongoDB collections using simple queries. However, I am struggling to understand how to query more complex data, such as the one below: db.employees.aggregate( [ ...

connect the input to a factor using v-model

I currently have a value that I need the user to adjust. Here's my current setup: <input type="number" v-model="value" step="any"/> However, the internal value is in radians while I want the user to see and input a degree value. So, I want th ...

Tips for Troubleshooting External Evaluation Scripts

For a specific example, take a look at the haystack.js script from How Big is Your Haystack? I've been searching for a solution and it seems that using the //# sourceURL=name.js comment is the way to go. However, I am struggling with the process of a ...

Error occurred in custom directive library due to unhandled TypeError

I have developed a personalized directory for tooltips and I am looking to turn it into a reusable library that can be imported and utilized in various projects. I have successfully created the library and imported it into different projects. However, upon ...

What action should be taken if there is only one choice in a SELECT statement?

I have created a dynamic form with three interconnected select elements. The first select element is populated with data fetched from a MySQL database using PHP. The second select element is populated based on the selection made in the first one, triggered ...

Combining multiple data sources into a single input field in VueJs

I've been exploring the idea of incorporating multiple values into a vue form input binding Here's an example snippet of my code. <template> <div> <label for=""> Employee </label> <input class="form-contro ...

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe. I believe adding ...

Learn how to dynamically show the chosen option from a dropdown menu in input text fields using AngularJS

html file: <select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress"> <option value=''>--Select Address --</option> </select> <form name="shippingForm" class="form-horizontal" role="form" ...