I've looked at the vue documentation on this page to see how I can solve this: https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting
I think i have all the syntaxes correct and I have tried many different scenarios with the href code.
This is the english translated file from my json file:
"link": {
"text": "Click this {Url} link."
}
This is from my template:
{{ $t("Message.link.text", { Url: www.google.com }) }}
This does not work and it displays {{ $t("Message.link.text", { Url: www.google.com }) }} in the UI.
Appreciate all the help I can get, thanks in advance!
You cannot output HTML with interpolation ({{ }} syntax) in Vue. You can use v-html for that but it is dangerous (see the warnings in the docs)
Use Component interpolation instead:
"link": {
"text": "Click this {url}.",
"link": "link",
}
Template:
<i18n path="Message.link.text" tag="p">
<template v-slot:url>
{{ $t('Message.link.link') }}
</template>
</i18n>
Related
simple question please, my POST in the views returns a json format dictionary
nested_data = {
'name': cleaned_data3['theme_name'],
'visualStyles': {
'barChart': {
'*': {
'general': [{
'responsive': cleaned_data2['responsive'],
'keepLayerOrder': cleaned_data2['maintain_layer_order']
}],
'legend': [{
'show': cleaned_data['show'],
'position': cleaned_data['position'],
'showTitle': cleaned_data['show_title'],
'labelColor': {
'solid': {
'color': '#666666'
}
},
'fontFamily': cleaned_data['font'],
'fontSize': cleaned_data['font_size']
}],
}
}
}
}
then I am returning the code formatted into json using:
return JsonResponse(nested_data)
This shows me the json rendered in the browser, but how do I download this return? In my index.html the submit button is rendering the return from the view, but I need to submit the forms and to download the content into .json file, something needs to be put into the href?
<input type="submit" value="Submit">
<a href="{{ xxx }}" download>DOWNLOAD</a>
You need change the response content type to application/force-download.
response = JsonResponse(nested_data)
response['Content-Type'] = 'application/force-download'
return response
# or ...
return HttpResponse(
simplejson.dumps(nested_data),
content_type='application/force-download'
)
You should define a function to write the json in views.py or index.html.
with open(file_name, "wb") as f:
f.write(data)
if you gonna write it in views.py, you could write the bellow lines in the js code section.
csrfmiddlewaretoken: "{{ csrf_token }}"
I have the following JSON object:
header: {
first: {
title: {
name: "Test
}
},
second: {
title: {
name: "Test 2"
},
desc: {
name: "Description"
}
}
}
Now I want to show it in view like that:
How can I manage to do that in the view? Since the keys will vary every time. For example once you have header, another time main and so on... Something like JSONEditor, where you can edit JSON objects. But I want to create something like that with my own design. I tried with ngIf but it seems really difficult. I'd be really thankful for any suggestions or help.
You can use the KeyValuePipe to iterate over objects using ngFor.
<!-- app-your-node component -->
<div *ngFor="let item of object | keyvalue">
{{ title }}
<app-your-leaf *ngIf="yourLogicThatThisIsALeaf(item); else node"
[title]="item.key" [object]="item.value"><app-your-leaf>
<ng-template #node>
<app-your-node [title]="item.key" [object]="item.value"></app-your-node>
</ng-template>
</div>
The following Json is recieved by the Vue Script, from a Php script which encodes an Array of Objects into JSON.
[{"title":"Clean Drinking Water","content":"Some Content","link":"abd.html","img":"<img src="kkk.jpg" />"
},
{"title":"Clean AAAAAter Provided","content":"Lore Lipsum
Test","link":"abc.html","img":"<img src="kkk.jpg" width="320" />"
}
]
How do i access title, content, link and image data from this Json using Vue. My Vue Code is
const url="lkl.php?get=json";
const vm=new Vue({
el:'#app',
data:{
results:[]
},
mounted(){
axios.get(url).then(response=>{
this.results=response.data
})
}
});
I have tried {{ results.title }} {{ results[0].title }} but that doesn't seem to work. I am fairly new to Vue. Any help would be much appreciated.
I'm having trouble iterating over data from a json file in Vue JS. I've got everything set up and have access to the json. What am I missing here:
JSON
{
"test": "example",
"data": [
{
"name": "My Name",
"address": "My Address"
}
]
}
Vue JS html
{{ someData['name'] }}
<ul>
<li v-for="item in someData" v-bind:key="item.id">
{{ item }}
</li>
</ul>
and my script:
created() {
this.$http.get('http://localhost:3000/properties.json').then(response => {
// get body data
this.someData = response.body
}, response => {
// error callback
});
}
The result I'm getting is:
Result
As you can see, in my v-for simply specifying item grabs each of the items here, but I want to be able to do something like {{ item['name'] }} and {{ item['address'] }}
The main problem is in your JSON file. VueJS v-for is iterating over the keys in your JSON file, in this case {{ item }} will be getting name and address. That is the reason of your output.
To solve this...
Format your JSON file as
[{name: 'John', address: 'Jane'}]
Doing this your VueJS v-for will be iterating over JSON array and {{ item }} will get the value { name: 'John', address: 'Jane' } and now you can do {{ item.name }} {{ item.address }}
An example here
EDIT: Update your API request code
created() {
this.$http.get('http://localhost:3000/properties.json').then(response => {
// get body data
this.someData = [response.body]
}, response => {
// error callback
});
}
You can simply do the following:
<template v-for="(item, key) in someData">
<span v-if="key == 'address'">{{item}}</span>
</template>
The crucial point is that the v-for="item in someData" part in the component's view iterates over values of the someData object, namely "John" and "Jane".
Depending on what exactly is your goal, you should either reformat the JSON to be an array of objects (as suggested by #F.bernal), or change the logic of v-for directive.
How do convert object to JSON and output it on html page?
public User:UserInfo=
{
firstName: "O",
lastName: "K",
email: "ol#op.com",
country: "uk",
avatarUrl: null,
receiveNotifications: true
}
I wish you had given us a bit more detail in your question, but I will do my best here so bear with me! Let's say you have an object that looks like this
a.component.ts
public obj = {
name: "Oleg",
question: "convert object to json",
description: "Some cool question about angular and JSON"
}
To present this data, your view would look like this
a.component.html
<h1> {{ obj.name }} </h1>
<h2> {{ obj.question }} </h2>
<p> {{ obj.description }} </p>
Please pay attention to how my class member is set to public, this is important whenever you are going to create an AoT build of the application.
If you are having trouble understanding, my simplified example. Check out this example
I can see that you are coming from the jQuery world, but with angular.js things are getting much simpler, please check this jsFiddle:http://jsfiddle.net/pkozlowski_opensource/ASspB/1/
With angular.js you can attach events much, much simpler:
<input type="button" ng-click="showJson()" value="Object To JSON" />
and then in your controller:
$scope.showJson = function() {
$scope.json = angular.toJson($scope.user);
}
In fact this could be done even easier with angular.js filters, check this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ which has:
{{user | json}}
You can try the following:
let jsonStr=JSON.stringify(user).