I have an Object array which is following
But, I need to show
email: Email muss eine .....
phone: Telefonnummer ist ...
How can I do this in javascript? Actually I need to use this in VueJs.
From the screenshot you are receiving this from props so we can do this in the template:
<template>
<div class="errors">
{{ failureReasons.email ? failureReasons.email[0] }}
</div>
</template>
If you would like to get all the errors into a single array (e.g. ['Email mus...', 'Telefon ...']) you can do:
<template>
<ul>
<li v-for="error in Object.keys(failureReasons).map(key => failureReasons[key][0])"> {{ error}} </li>
<ul>
</template>
Related
I want to make v-for loop without any html element so I decided to use <template as parent. I don't know to assign :key for this loop. I can't assign it to template and to every div inside loop. Any ideas?
<template
v-for="{ id, text, option, percentage, value } in reports"
>
<div class="table-row__index">
{{ id }}
</div>
<div class="table-row__title">
<p>{{ text }} - <strong>{{ option }}</strong></p>
</div>
<div class="table-row__info">
{{ percentage }}%
</div>
<div class="table-row__info">
{{ value }}
</div>
</template>
As a good practice we should always have a parent element inside. But due to your constraints, it's okay to use for loop on template as given in official docs
https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
In this case, any keys have to be added to child elements/components and this is what officially recommended.
See this example and please add keys to your div's inside template.
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="n in 5">
<span :key="'number' + n">{{ n }}</span>
<span :key="'dot' + n">. </span>
</template>
</div>
you just can't have the for loop in your template. The for loop directive is only allowed to be inside the first child component ( or root component) inside your template.
Here is an example of how you can render your loop:
<template>
<div class="cant-have-for-loop-this-is-the-root-component">
<div v-for="{ id, text, option, percentage, value } in reports" :key="{id}">
<div class="table-row__index">
{{ id }}
</div>
<div class="table-row__title">
<p> {{ text }} - <strong>{{ option }}</strong></p>
</div>
<div class="table-row__info">
{{ percentage }}%
</div>
<div class="table-row__info">
{{ value }}
</div>
</div>
</div>
</template>
This runs soomthly, and with no hesitations. And renders with no styling as this screenshots depicts:
Hope this answers what you want to achieve.
I remember I have seen once how to put the values in the html text area after importing components in VUE.
I'm not sure there is a way to do that or I just remember things in a wrong way.
my code is as below.
<template>
<div class="container">
<div class="row">
<Heading></Heading>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6">
<ul class="list-group">
<comp v-for='(value,index) in listing' :key='index'>{{value}}</comp>
</ul>
</div>
<serverstat></serverstat>
</div>
<hr>
<div class="row">
<footing></footing>
</div>
</div>
</template>
<script>
import Heading from './assets/Heading.vue';
import comp from './assets/comp.vue';
import serverstat from './assets/serverstatus.vue';
import footing from'./assets/footing.vue';
export default {
data() {
return {
listing: ['max','toms','judy','michael','dumdum']
}
},
components: {
Heading,comp,serverstat,footing
},
};
</script>
<style>
</style>
-comp-
<template>
<li class="list-group-item">
</li>
</template>
<script>
export default {
}
</script>
<style>
</style>
After I render this,
it doesn't show {{value}}. It only shows blank .
How do I insert the {{value}} within the html element?
Thank you in advance.
Since you are entering a value inside of a component, you can render it by using a slot in your component like this:
<template>
<li class="list-group-item">
<slot />
</li>
</template>
<comp v-for='(value,index) in listing' :key='index'>
<slot>{{ value }} </slot>
</comp>
Then in comp component use slot as
<slot/>
Not including the approach for props as you don't want to use that. Use the link above to learn more about slots.
When you use v-for it calls all the value from an array and :key='index' defines each object row from an array. If your object listing consists of firstname, lastname as your object then the value you want to print will be {{value.firstname}}. You are missing object name in value.
Can you try this once :
<comp v-for='(value,index) in listing' :key='index'>{{value.index}}</comp>
The situation
Let's break this question down to a simple todo list of which the entries are listed in a \li:
//main.html
<ul>
{{ #each listEntries }}
<li class="item">
{{ title }}
</li>
{{ /each }}
</ul>
Serverside:
//main.js
TodoCollection = new Mongo.Collection('todo_collection');
Now I am calling manually from the console in the client:
TodoCollection.insert({title: 'My first entry'});
Up to this point everything's fine.
Now meteor.JS works asynchronously which means that the changes that are made in the client also have effect on the DOM right away without knowing if the database insertion was successfull or not. If not, the DOM Element will be removed again (so first meteor inserts the new <li>, then it removes it again if insertion failed).
How can you get the information from meteor that something comes actually from the database?
What I need:
//main.html
<ul>
{{ #each listEntries }}
<li class="item">
{{ title }}
{{ #if isInDatabase }}
- i am actually stored!
{{ /if }}
</li>
{{ /each }}
</ul>
You can use the callback of the insert method of the collection. The callback is called with the error (null if there is none) and the object Id that was stored in the database
Below you can see the code to test this:
html:
<head>
<title>simple</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{>test}}
</body>
<template name="test">
<ul>
{{#each item in list}}
<li>{{item.name}}</li>
{{/each}}
</ul>
{{#if insertResult}}
<div class="insert_result">{{insertResult}}</div>
{{/if}}
{{#if insertError}}
<div class="insert_error">{{insertError}}</div>
{{/if}}
<form>
<input type="text" name="name" />
<input type="submit" value="Add" />
</form>
</template>
Javascript:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
collection = new Mongo.Collection('collection');
if (Meteor.isClient) {
Template.test.onCreated(function () {
this.insertResult = new ReactiveVar();
this.insertError = new ReactiveVar();
});
Template.test.helpers({
list() {
return collection.find();
},
insertResult() {
return Template.instance().insertResult.get();
},
});
Template.test.events({
'submit form'(event, instance) {
event.preventDefault();
collection.insert({
name: event.target.name.value
},function(err,result) {
if (err) {
instance.insertError.set(err);
instance.insertResult.set(null);
} else {
instance.insertResult.set(result);
instance.insertError.set(null);
}
});
},
});
}
As you can see in the previous answer, it is quite cumbersome in Meteor to know what causes a reactive update.
I would suggest a different approach: Don't insert on the client. Make a Meteor.call() to a server method which does the insert, and then let the client update reactively. Then you are always sure that what you see on the screen is actually in the database.
I think I found the most trivial solution myself:
Adding a hook on server-side that will add the date of creation with obj.onCreated = new Date(); helps identifying that it came from the server because this will not exist on the client.
{{#each item}}
{{ #if item.onCreated }}
<li class="success-db">{{name}}</li>
{{ else }}
<li class="pending-db">{{name}}</li>
{{ /if }}
{{/each}}
(Please do not hesitate to improve this answer if you find it contradictory to how Meteor.JS works)
If you want to show the data which title exist then you can write the code like this.
<ul>
{{ #each listEntries }}
<li class="item">
{{ title }}
{{ #if title }}
- i am actually stored!
{{ /if }}
</li>
{{ /each }}
</ul>
I have data returned from laravel in the following format. I store this in localstorage to be used by the users once he logs in.
I am using angular in frontend, this is how I store it
$http.get($scope.url).success(function(redata){
localStorage.setItem('session', JSON.stringify(redata));
$scope.fulldata = JSON.parse(localStorage.getItem("session"));
});
This is the json data
{
"tweets":[
{"id":"3","uid":"15","tweets":"Molly's first tweet"},
{"id":"4","uid":"15","tweets":"molly again here, second tweet"},
{"id":"5","uid":"15","tweets":"third tweet"}
],
"users":[
{"id":"1","name":"rob","email":"rob#gmail.com","password":""},
{"id":"2","name":"bob","email":"bob#gmail.com","password":""}
]
}
I am able to display the json using angular ng-repeat
<p ng-repeat="data in fulldata">
{{ data }}
</p>
But if I need to just display the content of tweets i.e "tweets" field of tweets, how do I do that.
I tried :-
<p ng-repeat="data in fulldata">
{{ data.tweets.tweets }}
</p>
but this did not work.
Thanks
you have to loop on tweets array.
<p ng-repeat="data in fulldata.tweets">
{{ data.tweets }}
</p>
You are looping through fulldata, which has just single tweets element. you need to loop through fulldata.tweets
<p ng-repeat="data in fulldata.tweets">
{{ data.tweets}}
</p>
or if you need to loop through all fulldata for all tweets
<div ng-repeat="data in fulldata">
<p ng-repeat="tweet in data.tweets">
{{ tweet.tweets }}
</p>
</div>
since the inner JSON is nested so you need two nested ng-repeat
<div ng-repeat="data in fulldata">
<p ng-repeat="tweets in data.tweets">
{{ tweets.tweets }}
</p>
</div>
<p ng-repeat="tweet in fulldata.tweets">
{{ tweet.tweets }}
</p>
This is what you want to do, no need for nested ng-repeats unless you specifically want that.
I'm returning the following JSON object
{"status":"success",
"valmessage":"Your message has been sent successfully.",
"postcontent":{
"post_author":1,
"post_recipient":"1",
"post_title":"handle test 2",
"post_type":"wp_inbox_msg",
"post_content":"<p>giving it another go.<\/p>\n"},
"postmeta":{
"postid":410,
"postdate":"Monday, March 17th, 2014",
"author":"admin"},"replies":null,
"Formerrors":[]
}
and I'm getting the following error inside my handlebars template :
Uncaught Error: Parse error on line 23:
...replies}} {{ #each replies }
----------------------^
Expecting 'ID', 'DATA', got 'INVALID'
inside my tempalte I'm doing the following :
{{#if replies}}
{{ #each replies }}
<li>
<figure class="reply-author-img">
<img alt="" src="{{ avatar }}" height="96" width="96">
</figure>
<div class="replycontentwrap">
<div class="reply-from">
<p class="reply-author">
<strong>{{ fullname }}</strong>
<span>{{ nickname }}</span>
</p>
<span class="replydate">{{ reply_date }}</span>
</div>
<div class="reply-content">{{ reply_content }}</div>
</div>
</li>
{{ /each }}
{{/if}}
Replies is currently Null but it should be returning a set of objects when there are replies to the message, How would be the best way to 1) get this working and 2) approach this kind of data structure with handlebars.js ?
The error you are getting is a result of the fact that you have a space before the '#each' and '/each', so make it:
{{#each replies}}
/* each stuff */
{{/each}}
You can also directly use as below to reduce complexity, also you get good understanding if there are multiple each blocks.
{{#replies}}
{{this}}
{{/replies}}
This method is parallel to #each and can iterate key value if it is object, otherwise array index and object(value)