Vue js lacks the ability to effectively link HTML elements to corresponding JavaScript functions

Question

Vue js lacks the ability to effectively link HTML elements to corresponding JavaScript functions

I seem to be missing a crucial element in my spring boot application. I am attempting to follow the initial steps outlined in the Vue documentation to create the most basic Vue application possible. Here is what I currently have:

@Controller
public class TestController {

    @GetMapping("/home")
    public String index() {
        return "home";
    }
}

Within the Resource folder, I've created a Template folder where I've defined home.html and home.js as follows:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
            {{ message }}
        </div>

However, when I try to access the _home_ route, all I see is

{{ message }}

It appears that the js file may not be linked correctly. Any assistance would be greatly appreciated.

javascript java spring vue.js model-view-controller

Answer 1

Answer №1

When testing the code provided in this snippet, it appears to be functioning correctly:

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    {{ message }}
</div>

If you encounter any errors in the developer tools console, try adding some logs within your js file to verify that it is running properly.

Answer 2

When testing the code provided in this snippet, it appears to be functioning correctly:

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    {{ message }}
</div>

If you encounter any errors in the developer tools console, try adding some logs within your js file to verify that it is running properly.

Answer 3

Answer №2

Your main-page.html isn't properly set up to utilize Vue through CDN. While it does load Vue via CDN, it fails to specify the need to load main-script.js and initialize the Vue instance.

Instead of delving into Spring Boot specifics for resource delivery (e.g. main-script.js) since it's not the root issue, make sure to update main-page.html by including the following script:

<!-- This is Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">{{ message }}</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

After making this change, check if opening main-page.html in your browser resolves the issue. This fix will also ensure it works when served by Spring Boot.

Answer 4

Your main-page.html isn't properly set up to utilize Vue through CDN. While it does load Vue via CDN, it fails to specify the need to load main-script.js and initialize the Vue instance.

Instead of delving into Spring Boot specifics for resource delivery (e.g. main-script.js) since it's not the root issue, make sure to update main-page.html by including the following script:

<!-- This is Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">{{ message }}</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

After making this change, check if opening main-page.html in your browser resolves the issue. This fix will also ensure it works when served by Spring Boot.

Vue js lacks the ability to effectively link HTML elements to corresponding JavaScript functions

Answer №1

Answer №2

Similar questions

When will the javascript file fire if it has this implementation?

Execute JavaScript/AJAX solely upon the selection of a button

Discovering if an element is present with Cypress.io

Is it possible to add data in MongoDB without specifying a field name?

What is the best way to paginate aggregated results in Mongoose?

What is the best way to utilize Vue 3's native KeepAlive component to store a child component of a webpage in memory, ensuring that it only retrieves data from its API upon initial page load?

Getting the nested object property with pluck using Lodash

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Can you explain the distinction in JavaScript between declaring a variable with `var a = xyz[]` versus `var a = xyz

Can you explain the purpose of this variable "guess = require('myModule1')('myModule2');" ?

Leveraging the power of javascript to include content before and after

How do I programmatically switch the Material-UI/DatePicker to year view in React?

Vue.js: In a third-party library, the reference to "this" is coming back as "undefined"

Is there a way to automatically retrieve CSV data using ashx on a web page?

Is there a method to redirect and display a JavaScript message efficiently?

Concealing specific elements in Angular by utilizing ng-class conditions

The webpage freezes when attempting to run jQuery with Selenium

Tips for picking out a particular item from a list of child elements

Is Javascript Profiling a feature available in Firebug Lite?

What could be causing my form to malfunction when attempting to submit data using Ajax and an external PHP script that is handling two string inputs?