I am not sure how to access a model I create with my controller with Vue in my html. I know how to access model attributes with thymeleaf, but cannot find any info anywhere on how to access them with Vue. I would like to store the count value from the controller in the Vue data count I have below. I am using Vue within my template hosted with CDN, not as a separate project.
Here is my controller:
#PostMapping("/word")
public String searchSentence(#ModelAttribute WordSearch wordSearch, Model model) {
int c = wordSearch.search();
String count = String.valueOf(c);
model.addAttribute("wordSearch", wordSearch);
model.addAttribute("count", count);
return "count";
}
Here is the count.html:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Count-Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>Result</h1>
<p th:text="'sentence: ' + ${wordSearch.sentence}" />
<p th:text="'word: ' + ${wordSearch.word}" />
<!--<p th:text="'count: ' + ${count}" /> -->
<div id="count-text" style="display: none">
<p th:text="${count}" />
</div>
<div id="app">
{{count}}
</div>
<script>
new Vue({
el: '#app',
data() {
return {
count: ""
}
},
created() {
this.count = ???
}
})
</script>
Submit another message
</body>
</html>
You can follow this blog to do what you desire. https://dev.to/brunodrugowick/spring-boot-vue-js-axios-and-thymeleaf-with-bootstrap-in-4-commits-2b0l. In this author explains how you can use Thymeleaf and VueJS together by adding VueJS dependency in pom.xml.
you need following dependency in your pom xml to use VueJS,
<dependency>
<groupId>org.webjars</groupId>
<artifactId>vue</artifactId>
<version>2.6.11</version>
</dependency>
Thymeleaf is a server-side Java template engine, while Vue is a JS framework to build frontend layer. The best way to connect Spring with Vue would be by an API.
So you'll need to expose your data as a JSON, make a http call vue app -> java api and consume the response.
Here you can find more details, how this works
All you have to do is create a method returning ResponseBody, then you call this method in Vue (Axios is a good option!).
Example 1: function to get a String variable:
#GetMapping( "/getLanguage")
#ResponseBody
public String obtenerIdiomaActual() {
return languageService.getLanguage();
}
Then you'd need a method in your Vue app to read this value:
const vm = Vue.createApp({
data() {
return {
language: null,
}
},
methods: {
getLanguage() {
axios.get(window.location.origin + '/getLanguage')
.then(response => {
this.language = response.data;
})
.catch(error => {
this.errorMessage = error.message;
console.error("There was an error!", error);
});
},
mounted: function () {
this.getLanguage();
},
watch: {
idioma: function () {
console.log("Language: " + this.language);
}
},
}).mount('#myApp')
You can use all kind of complex data: objects, arrays, dictionaries (maps)...
#GetMapping( "/getComplexData")
#ResponseBody
public Map<String, List<SpaceBean>> getMyComplexData() ...
And read the response easily with Vue:
<div v-for="(spaceList, key) in datos">
<p v-cloak><b>{{key}}</b></p>
<table class="display" style="width: 100%" v-cloak>
<tbody>
<tr v-for="space in spaceList">
<td>{{space.alias}}</td>
<td>{{space.descripcion}}</td>
<td>{{space.url}}</td>
</tr>
...
I hope this help a little!!
Related
I have this code which output some values according to my users location and I want to display this values, On input but when I use <input value="{{useragent}}" /> it is just displaying {{useragent}} not the output.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body translate="no">
<div id="app">
<p>{{useragent}}</p>
<p>{{tsFormatted}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script id="rendered-js">
new Vue({
el: "#app",
data() {
return {
response: null,
ip: null,
useragent: null,
ts: null,
};
},
watch: {
// This should do a substring of the result returned by CloudFlare
response: function () {
this.ip = this.response.substring(this.response.search("ip=") + 3, this.response.search("ts="));
this.ts = this.response.substring(this.response.search("ts=") + 3, this.response.search("visit_scheme="));
this.useragent = this.response.substring(this.response.search("uag=") + 4, this.response.search("colo="));
},
},
computed: {
tsFormatted() {
return new Date(this.ts * 1000);
},
},
mounted() {
// Get the user's states from the cloudflare service
axios.get("https://www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response.data));
},
});
//# sourceURL=pen.js
</script>
</body>
</html>
how can I display this {{values}} inside HTML <input> tag ?
When dealing with inputs, if you want useragent to fill the input field then use v-model instead of value
<input v-model="useragent" />
You can read more about it from Vue 2 DOCs: https://v2.vuejs.org/v2/guide/forms.html
You need to bind values :value or v-bind:value:
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body translate="no">
<div id="app">
<input :value="useragent" />
<input v-bind:value="tsFormatted" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script id="rendered-js">
new Vue({
el: "#app",
data() {
return {
response: null,
ip: null,
useragent: null,
ts: null,
};
},
watch: {
// This should do a substring of the result returned by CloudFlare
response: function () {
this.ip = this.response.substring(this.response.search("ip=") + 3, this.response.search("ts="));
this.ts = this.response.substring(this.response.search("ts=") + 3, this.response.search("visit_scheme="));
this.useragent = this.response.substring(this.response.search("uag=") + 4, this.response.search("colo="));
},
},
computed: {
tsFormatted() {
return new Date(this.ts * 1000);
},
},
mounted() {
// Get the user's states from the cloudflare service
axios.get("https://www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response.data));
},
});
//# sourceURL=pen.js
</script>
</body>
</html>
<input type="text" :value="useragent" />
or
<input type="text" v-model="useragent" />
vue Form Input Bindings doc
Before went to the solution, I have a question to you - Do you want one-way or two-way data binding for your input ?
If you will use :value, It will work as a one-way data binding and will just update the input value but if you will make any changes in your input it will not modify the model/variable.
If you will use v-model, It will work as a two way data binding and will update both input as well as model/variable if any changes happen at any end.
Live Demo :
new Vue({
el:'#app',
data:{
name:'Alpha'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.4/vue.js"></script>
<div id="app">
<div>One Way binding <input type="text" :value="name"/></div>
<div>Two way binding : <input type="text" v-model="name"/> </div>
<div>Result : {{name}}</div>
</div>
I’m pretty new to Vue.js and love it so far. There’s only one problem I have: How do I render a string AND things inside the string?
For example:
//…
data:{
string:"hi, {{name}}",
name:"John Doe"
}
{{string}}<!—won’t work —>
<span v-html="string"></span><!—neither this —>
I want to insert “string” into the html and afterwords insert “name”.
The “Hello {{name}}” should inserted after an Ajax call and therefore not be featured in the HTML.
The output should be “hi, John Doe”.
To make it clear, what I want to have is:
{{string}}
<!-- becomes-->
hi, {{name}}
<!--finally becomes-->
hi, John Doe
Use a computed property to return string with data variable inside string;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<h1>{{this.stringWithVar}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: 'John Doe'
},
computed: {
stringWithVar: function () {
return `hi, ${this.name}`;
}
}
})
</script>
</body>
</html>
In my Drupal 7 site's html I have this
<script>$L = $L.wait(function() {
(function($) {
Drupal.behaviors.related_products = {
attach: function (context, settings) {
artiklar = Drupal.settings.related_products.artiklar;
console.log(artiklar);
}
};
})(jQuery);
});</script>
In the variable artiklar above I have some data that I have passed from the server side using Drupal behaviors. Now, on the client side I need to access the variable artiklar in a Vue component, like so:
Vue.component('artikel-lista', {
template:`
<ul>
<artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">Läs mer</a></artikel>
</ul>
`,
data(){
return {
artiklar: "",
};
},
mounted: function(){
this.artiklar = artiklar // how can I access the variable "artiklar" here
},
});
The data in the variable consists of an array of items, that I need in my Vue component. But how can I pass the variable from within the script tags to the Vue instance, that lives in a separate file, inserted just before the ending body tag. Anyone?
If you have data in the globally visible Drupal.settings.related_products.artiklar object then you can refer to it practically the same way in Vue.js. or if you must use this function, assign data to global scope window.*.
new Vue({
template: `<div>{{foo}} / {{bar}}</div>`,
data() {
return {
foo: Drupal.settings.related_products.artiklar,
bar: window.artiklarData
};
}
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Vue App</div>
<script>
// simulate global variable
var Drupal = {
settings: {
related_products: {
artiklar: ['fus', 'ro', 'dah']
}
}
};
(function() {
window.artiklarData = Drupal.settings.related_products.artiklar;
})();
</script>
If you assign the value to Drupal.settings.related_products.artiklar after creating the Vue object, you can try to use the solutions described in the documentation, e.g.
const vm = new Vue({
template: `<div>{{foobar}}</div>`,
data() {
return {
foobar: 'Initial value'
};
}
}).$mount("#app");
setTimeout(() => {
// simulate global variable
var Drupal = {
settings: {
related_products: {
artiklar: 'Changed value'
}
}
};
(function() {
vm.foobar = Drupal.settings.related_products.artiklar;
})();
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Vue App</div>
Maybe you could use RxJS but I don't have enough knowledge to tell if it's true and give an example.
Just in case anyone else is struggling with the same thing, I post this answer to my own question (I accidentally posted the question with the wrong account). In the end it turns out that the answer from Gander was correct and that I could access the variable directly in the Vue component, w/o first stashing it an a global variable. The viewed result was kind of weird though and after some trialling I found out that I had to parse the result with JSON.parse(). This is the working code now:
Vue.component('artikel-lista', {
template:`
<ul>
<artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">Läs mer</a></artikel>
</ul>
`,
data(){
return{
artiklar:""
}
},
mounted:function(){
this.artiklar = JSON.parse(Drupal.settings.related_products.artiklar);
console.log(this.artiklar);
}
});
I would like to render several div containers depending on a returned API call from axios/vue. The axios call and callback work just fine, but vue won't render any divs.
Since I am using Django, I already changed the delimiters from curly brackets (which is Django default as well).
Error message in console:
Property or method "data" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option,
or for class-based components, by initializing the property.
Please find a minimal code snippet as follows (if you remove the JS part the html will show up):
Thank you in advance for your help!
var app = new Vue({
delimiters: ['[[', ']]'],
el: '.EUR_Quotes',
data: {
info: []
},
created() {
axios
.get("http://data.fixer.io/api/latest?access_key=XXXd&base=EUR")
.then(response => {
this.info = response.data.rates;
console.log(response);
});
}
});
.EUR_Quotes {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<head>
</head>
<body>
<div v-for="rates in info">
<div class="EUR_Quotes">[[ data ]]
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>
You are confusing your data variable name, it should be info in your template, (not data) the actual data object is the container for all your vuejs app's data.
Check the snippet, it works fine.
var app = new Vue({
delimiters: ['[[', ']]'],
el: '.EUR_Quotes',
data: {
info: []
},
created() {
axios
.get("http://data.fixer.io/api/latest?access_key=d&base=EUR")
.then(response => {
this.info = response.data.rates;
console.log(response);
});
}
});
.EUR_Quotes {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<head>
</head>
<body>
<div v-for="rates in info">
<div class="EUR_Quotes">[[ info ]]
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>
I am using Vue js in my javascript code. I downloaded the vue-star-rating npm package to have a rating system for one of my elements. I believe I have followed the instructions here correctly, but I am getting the error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link type="text/css" rel="../css/ProductEvaluation.css" />
</head>
<body>
<button class="btn btn-sm" id="btnRun">Run</button>
<div id="product-eval-areas">
<ul>
<li v-for="area in areas">
{{area.EvaluationArea}}
// Error is occurring on this custom element
<star-rating v-model="area.ProductEvaluationScore"></star-rating>
</li>
</ul>
</div>
<script src="https://url.com/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
<script src="../../Scripts/papaparse.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../Scripts/require.js" data-main="../js/main/ProductEvaluation.js"></script>
</body>
</html>
.js
"use strict";
requirejs.config({
bundles: {
'https://url.com/WebResources/ccseq_/WebResources/js/lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
//'../lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
}
});
require(["Model/ProductEvaluation", "Model/ProductEvaluationArea", "API/ProductEvaluation", "API/ProductEvaluationArea", "../../../node_modules/vue-star-rating/dist/star-rating.min"], function (ProductEvaluationModel, ProductEvaluationAreaModel, ProductEvaluationAPI, ProductEvaluationAreaAPI, StarRating) {
var currentProductEvaluation = new ProductEvaluationModel.ProductEvaluation();
Vue.component('star-rating', StarRating);
var areas = new Vue({
el: '#product-eval-areas',
data: { areas: currentProductEvaluation.ProductEvaluationAreas }
})
$(document).ready(function () {
PopulatePage();
});
function PopulatePage() {
$("#btnRun").click(function () {
var productEvaluationAPI = new ProductEvaluationAPI.ProductEvaluation();
productEvaluationAPI.Get(window.parent.Xrm.Page.data.entity.getId().replace(/({|})/g, "")).
then(
function (results) {
LoadProductEvaluation(results);
console.log("success");
}).catch(function (results) {
console.log("Fail");
});
});
}
function LoadProductEvaluation(productEvaluation) {
productEvaluation.ccseq_ccseq_productevaluation_ccseq_producteval.forEach(function (pe) {
var newProductEvaluationArea = new ProductEvaluationAreaModel.ProductEvaluationArea();
newProductEvaluationArea.EvaluationArea = pe.ccseq_evaluationarea;
newProductEvaluationArea.ProductEvaluationScore = pe.ccseq_productevaluationscore;
newProductEvaluationArea.SelfEvaluation = pe.ccseq_selfevaluation;
newProductEvaluationArea.ProductEvaluationID = pe.ccseq_productevaluationid;
currentProductEvaluation.ProductEvaluationAreas.push(newProductEvaluationArea);
});
}
});
This is my package, but I didn't document how to use it with requireJS as I haven't used it in quite a few years. It is however bundled as a named UMD module which is defined as "VueStarRating" so you need to add the following to your requirejs config:
paths: {
'VueStarRating': '../../../node_modules/vue-star-rating/dist/star-rating.min'
}
Then you can do:
require(['VueStarRating'], function(StarRating) {
Vue.component('star-rating', StarRating.default);
new Vue({
el: '#app'
})
});
You can check it out on this JSFiddle: https://jsfiddle.net/2Lgz9vs4/
If you run into further trouble then it might be worth tagging your questions with requirejs aswell. Most Vue developers use CommonJS (including myself) so you should get better responses there.