<template v-for="errors in validationErrors">
<li v-for="(error, index) in errors" :key="index">{{ error }}</li>
</template>
The above code throws:
Duplicate keys detected: '0'. This may cause an update error
If I remove index from the inner loop and assign error to key then there is no warning, however that just seems wrong.
Any way to not have this warning when using templates?
You could use this instead:
<template v-for="(errors, outerIndex) in validationErrors">
<li v-for="(error, index) in errors" :key="outerIndex + '-' + index">
{{ error }}
</li>
</template>
Explanation
Without unique information from the outer loop, the inner loop key will use the same set every time, so you end up with duplicates. Ex. if you had two outer loops with 3 items each, you'd get this:
<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>
<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>
By using an outerIndex too, you maintain uniqueness in the inner elements:
<li key="0-0">...</li>
<li key="0-1">...</li>
<li key="0-2">...</li>
<li key="1-0">...</li>
<li key="1-1">...</li>
<li key="1-2">...</li>
Related
Trying to display list of strings inside the template after retrieving data as JSON.
public class AutoCompSearchResult
{
public List<string> eventName = new List<string>();
}
The problem is that I need to display one by one on the list, but it displays all list between
<li> tags:
<li>EVENTS</li>
{{#each this}}
<li style="list-style: none">{{eventName}} -- </li>
{{/each}}
I have tried similar solutions https://mandrill.zendesk.com/hc/en-us/articles/205582537-Using-Handlebars-for-Dynamic-Content
but this does not output the data for my case since, I do not know the syntax for handlebars js using:
{{#each eventName}}
<li style="list-style: none">{{this}} -- </li>
{{/each}}
I want final result to be:
<ul>
<li>Item1</li>
<li>Item2</li>
...
</ul>
Chrome console of data passed:
eventName
[Object
eventName:Array[2]
0:"Dr. Dog"
1:"Laura Gibson"
__proto__
:
Array[0]
__proto__
:
Object
Finally figured out:
<ul>
<li>EVENTS</li>
{{#each this.[0].eventName}}
<li style="list-style: none">{{this}} -- </li>
{{/each}}
I had to use this.[0] to access the object and then iterate over member variable: eventName
So using *ngFor i displayed the list of name property of object, this object also has a property named isAvailable I want to set isAvalable property to toggle between true and false when I click on it, and based on isAvalible a text next to li will display is available or not
<p>Authors</p>
<ul>
<li *ngFor='let author of authors' (click)='onClick()'>
{{author.name}}
</li>
</ul>
As I understand you want this
<p>Authors</p>
<ul>
<li *ngFor='let author of authors'>
<span [hidden]='author.isAvalible'>{{author.name}}</span>
<span (click)='author.isAvalible = !author.isAvalible '>author.isAvalible</span>
</li>
</ul>
<p>Authors</p>
<ul>
<li *ngFor='let author of authors'>
<span [hidden]='author.isAvalible'>{{author.name}}</span>
<span (click)='onClick()'>author.isAvalible</span>
</li>
</ul>
onClick(value){
value=!value;
}
I have a Twitter Bootstrap list with a variable number of elements (in fact there are two lists with draggable and droppable elements done with Sortable.js).
At some point, I want to iterate those lists elements in order to get a data atribute from each list entry. This is how my list looks like at HTML:
<div class="panel-body">
<ul id="main_list" class="list-group">
<li id="opt1" href="#" class="list-group-item" data_value="1">Opt 1</li>
<li id="opt2" href="#" class="list-group-item" data_value="2">Opt 2</li>
<li id="opt3" href="#" class="list-group-item" data_value="3">Opt 3</li>
</ul>
</div>
Is this even possible to achieve, or am I thinking too object oriented? If not, how should I rethink this task?
You can put your specific information like
<li id="opt3" href="#" class="list-group-item" data-value="3">Opt 3</li>
and get that easily with jquery:
$("#opt3").data("value")
But the semantic way to do that is with "-" instead of "_".
To iterate your list, you can do:
$("#main_list li").each(function(){
var itemValue = $(this).data('id');
var itemName = $(this).data('name');
alert(itemValue+" - " +itemName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<ul id="main_list" class="list-group">
<li id="opt1" href="#" class="list-group-item" data-name="customname1" data-id="1">Opt 1</li>
<li id="opt2" href="#" class="list-group-item" data-name="customname2" data-id="2">Opt 2</li>
</ul>
</div>
Thiago's answer is totally valid, and if jQuery is already used then it should be the accepted answer. But for the sake of it here is a solution in plain js:
var elements = document.getElementById('main_list').children,
maxElements = elements.length,
counter = 0,
tmpAttribute;
for (; counter < maxElements; counter++) {
tmpAttribute = elements[counter].getAttribute('data_value');
// whatever you need to do with tmpAttribute
}
You could wrap that in a function and call it on click for example. Here is a demo to see it in action: http://jsfiddle.net/Lzcbzq7x/1/
this is my rename function, none of the options i've tried work, i do know, that set_id is the function to use but how?
$('#jstree').on('rename_node.jstree', function (node,obj) {
var node_id = "calculated"// calculate node_id
// tried the following 3 options ..
....
$('#jstree').jstree(true).set_id(obj,node_id); //not working
obj.instance.set_id(this,node_id)// not working either
obj.instance.set_id(obj,node_id)//nope..
So how do i set the node_id in jstree?
I looked at the API http://www.jstree.com/api/#/?q=rename&f=rename_node.jstree, and I think you have to use obj.node.
$('#jstree').jstree(true).set_id(obj.node,node_id);
obj.text should contain the new name of the node, and obj.old the old name of the node.
EDIT: The link to the API documentation does not match the code example.
Here are the correct links:
To set the ID of a node: https://www.jstree.com/api/#/?f=set_id(obj,%20id)
To rename the node (set the text value): https://www.jstree.com/api/#/?f=rename_node(obj,%20val)
The first parameter you called node is actually the event object
Example creating a node then updating his autogenerated id
$('#jstree').on('create_node.jstree', function (e, obj) {
#...
$(this).jstree(true).set_id(obj.node, 42);
}
Try the following inside your on.() function:
$(this).attr("id", node_id);
Just set property id on the element you´re using to create the nodes.
<div id="jstree">
<ul>
#foreach($feelings as $feeling)
<li id="{{{$feeling->id}}}">{{{$feeling->name}}}
<ul>
#foreach($feeling->children as $feeling_children)
<li id="{{{$feeling_children->id}}}">{{{$feeling_children->name}}}
<ul>
#foreach($feeling_children->children as $feeling_children2)
<li id="{{{$feeling_children2->id}}}">{{{$feeling_children2->name}}}
<ul>
#foreach($feeling_children2->children as $feeling_children3)
<li id="{{{$feeling_children3->id}}}">{{{$feeling_children3->name}}}
<ul>
#foreach($feeling_children3->children as $feeling_children4)
<li id="{{{$feeling_children4->id}}}"> {{{$feeling_children4->name}}}</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
I have the following list and when I call toArray or serialize it only offers me the parent <li>. I am trying to get hold of the whole hierarchy so I can store this information into a self referencing heirachy table in the database. The result here shows item_1,q_6,a_7,g_8. Where is item_3,item_4,item_5.
Thanks
<div id="example5">
<ul>
<li id="item_1">Item 1
<ul id="item_2">
<li id="item_3">Item 1 1<ul></ul></li>
<li id="item_4">Item 1 2<ul></ul></li>
<li id="item_5">Item 1 3<ul></ul></li>
</ul>
</li>
<li id="q_6">Item 2<ul></ul></li>
<li id="a_7">Item 3<ul></ul></li>
<li id="g_8">Item 4<ul></ul></li>
</ul>
</div>
<button id="fred">Click</button>
$("#fred").click(function () {
//var result = $('#example5 ul').sortable('toArray');
var result = $('#example5 ul').sortable('serialize'); //Neither work
alert(result);
});
As far as I can tell there's no default way of serializing nested sortable lists in jquery UI.
The best way to do it is to go through every child of "#example5 ul" and build your own structure (I would recommend JSON in this case) to be send to the server.