I am in the process of setting up a Vue application that will send a request to a backend and then showcase the response on the webpage. I created this example:
new Vue({
data: {
message: '{}'
},
el: '.login-app',
});
Vue.component('message-section', {
template: '<div>Message Section</div>'
});
Vue.component('login-component', {
template: '<div><button v-on:click="login(\'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107d797b755076717b753e737f7f">[email protected]</a>\', \'passwd\')">Login</button></div>',
methods: {
login: function (username, password) {
axios.post("http://192.168.1.10:8080/login", {username: username, password: password})
.then(response => {this.message = response.data})
}
}
});
and an index like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>Vue Test</title>
</head>
<body>
<div class="login-app">
{{ message }}
<message-section></message-section>
<login-component></login-component>
</div>
<script src="/static/testvue.bundle.js></script>
</body>
</html>
The concept is a basic app where a username/password are submitted and a response such as "success" is displayed. However, being inexperienced with Vue and JavaScript, I am encountering difficulties. I am unsure how to display the response anywhere. The {{ message }} in there doesn't seem to function properly. It appears that only the {} from the "message" attribute is being rendered. Also, the user/pass is hardcoded... I am uncertain how to integrate it with a form field.
I can observe the data being sent to the backend, indicating that part is functional...
Furthermore, how can a Vue project be organized into multiple "modules" or similar structures?
Edit:
If I modify it so there's only one component like this:
new Vue({
data: {
message: '{}'
},
el: '.login-app',
methods: {
login: function (username, password) {
axios.post("http://192.168.91.30:8080/login", {username: username, password: password})
.then(response => {this.message = response.data})
}
}
})
and
<div class="login-app>
{{ message }}
<button v-on:click="login(\'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9df0f4f6f8ddfbfcf6f8b3fef2f0">[email protected]</a>\', \'passwd\')">Login</button>
</div>
Then nothing displays at all... Wasn't this supposed to put them inside the same container or something similar?