Develop Reference

How do I access the dynamic template refs that are nested in Vue 3?

I have a custom list component gcl-list that uses a v-for to render a passed template for each item in an array. Ive nested one of these components in another and am trying to access refs on the children gcl-list-items to then edit the innerHTML but when I access that ref it gives me a string representation of the element which I cant edit the inner HTML. How would I access that childs span and change its innerHTML?
Output to console when logging childItemRefs.value:
Proxy
handler: {get: function, set: function, deleteProperty: function, has: function, ownKeys: function}
target: Array (2)
0 <span data-v-2b58c258>Three.One</span>
1 <span data-v-2b58c258>Three.Two</span>
Code:
<gcl-list :listArray="filteredDropdownItems">
<template v-slot="itemData">
<gcl-list-item
selectable
:indeterminate="itemData.item.indeterminate"
:checked="itemData.item.selected"
:iconStart="itemData.item.iconStart"
:iconEnd="itemData.item.iconEnd"
#click.stop
#click="onItemClick(itemData.item)"
>
<span :ref="el => itemRefs[filteredDropdownItems.indexOf(itemData.item)] = el">
{{ itemData.item.displayValue }}
</span>
</gcl-list-item>
<gcl-list v-if="itemData.item.childItems" :listArray="filteredChildren(itemData.item.childItems)">
<template v-slot="childItemData">
<gcl-list-item
selectable
nested
:checked="childItemData.item.selected"
:iconStart="childItemData.item.iconStart"
:iconEnd="childItemData.item.iconEnd"
#click.stop
#click="onChildItemClick(childItemData.item, itemData.item)"
>
<span :ref="el => childItemRefs[filteredChildren(itemData.item.childItems).indexOf(childItemData.item)] = el">
{{ childItemData.item.displayValue }}
</span>
</gcl-list-item>
</template>
</gcl-list>
</template>
</gcl-list>
```
[1]: https://i.stack.imgur.com/1dFTx.png

display data in specific order in polymer

In my polymer dom, each data object todo has multiple items and it also has a todo.idx. I would like to order the items according to its todo.idx, instead of their (random) ordering in the data. How can I do it with polymer?
In the polymer document, it mentions a sort function, but I couldn't find examples there. My current code is as follows.
<ol>
<template is="dom-repeat" items="{{todos}}" as="todo">
<li><span> {{todo.item}} </span> </li>
</template>
</ol>

You can sort items in polymer using the sort attribute, and in your case you would want to use nested templates so you can sort on the dom-repeat for a given todo's items:
<template is="dom-repeat" items="{{todos}}" as="todo">
<template is="dom-repeat" items="{{todo.items}}" as="item" sort="_sortItems">
<li><span>{{item}}</span></li>
</template>
</template>
You can then define your _sortItems function in same fashion as you would for a compare function in Array.prototype.sort():
_sortItems: function(a, b) {
if (a.idx < b.idx) { return -1; }
if (a.idx > b.idx) { return 1; }
return 0;
}

Access parent dom-repeat item on clicking child dom-repeat item

I am using polymer.I have array of objects it looks
[{
name:xxx,
address:yyy,
times:[
{start:12,
End:5
},
{start:2,
End:4
}
]
},
{//same format repeats
}
]
I used nested dom-repeat,
<template is="dom-repeat" items="{{pList}}" as="list">
<paper-item>
<paper-item-body two-line>
<div>[[list.address]]</div>
<div secondary>[[list.name]]</div>
</paper-item-body>
<template is="dom-repeat" items={{list.times}} as="time">
<paper-item-body on-tap="_handleTime" two-line>
<div>[[time.start]]</div>
<div>[[time.end)]]</div>
</paper-item-body>
</template>
</paper-item>
</template>
I have on tap function in second dom-repeat,so on taping below function is called,here I can access time object.
how can I access name and address which is in first dom-repeat using with 'e' reference as bellow?
I tried parentElement but its not working!
_handleTime:function(e) {
console.log(e.model.time); //displays time obj i.e {start:12,End:5} but I'm trying to get {name,address,{start,end}}
console.log(e.parentElement);//gives error
//I'm trying to get entire object like {name:xxx,address:yyy,times:[]}
}

var item = this.$.firstRepeat.itemForElement(e.target);
where firstRepeat is the id of the first dom-repeat,
check this example

Vue.js: How to map a list of keys to Firebase objects?

I develop a small web-app based on Vue.js using Firebase to store and sync the data. I store items (e.g. with attributes title and subtitle) and lists with an attribute listitems, where an array of keys (those generated from Firebase) of items is stored. The structure looks like this:
Now the problem: I want to display a list and show the items from the listitems attribute and I'm doing it like this:
Compontent:
var ShowList = Vue.extend({
template: '#show-list',
firebase: {
// get all existing items from firebase
items: firebase.database().ref('items')
},
data: function () {
// get list item keys of list 'list_id' and bind it to this.list
this.$bindAsObject('list', listsRef.child(this.$route.params.list_id));
return {
list: this.list
};
}
});
Template:
<!-- show a list -->
<template id="show-list">
<ul v-if="list.items != ''">
<li v-for="key in list.items"> <!-- I would like to not being forced to -->
<template v-for="item in items"> <!-- iterate the whole list of existing items -->
<span v-if="item['.key'] == key">
{{ item.title }}
</span>
</template>
</li>
</ul>
<div v-else>No items.</div>
</template>
As you can see, I have to use two iterations where I iterate the full items list for every entry in list.items.
My question: Is there a more efficient way to map the actual objects to the list of object keys? For a huge number of item records, my approach will be very slow. Maybe I'm just too blind to see a simpler solution?
Thanks for your time!

I think you have to denormalize/duplicate some data there. I had a similar situation and this Firebase video cleared a lot of things up for me: https://youtu.be/ran_Ylug7AE?t=2m22s (Link updated to passage at 2:22. The whole serie is worth watching btw.)
My shot at it would be adding (Firebase) keys in "listitems", just like you have done in "items", with only the most crucial data there, so that you can link to a full description

Is your data read only? In which case you could move the filter logic from your template to your data module, like so (I expect I have unintended side-effects):
data: function () {
// get list item keys of list 'list_id' and bind it to this.list
this.$bindAsObject('list', listsRef.child(this.$route.params.list_id));
var items = firebase.database().ref('items')
var activeItems = this.list.items.map(function(key) {
return items[key]
})
return {
activeItems: activeItems;
};
}

Polymer: How can I load dynamic values into a paper-item within a paper-menu?

I would like to get from javascript code load a list of objects I get from firebase, to the "items" property of a paper-item within a paper-menu. Here's my code:
HTML:
<paper-menu class="menuList" id="disciList" attrForSelected="value" selectedItems="{{selectionDisci}}" multi>
<template is="dom-repeat" items="{{disciplines}}">
<paper-item value="{{item.name}}">{{item.name}}</paper-item>
</template>
</paper-menu>
Javascript:
var disciplines = [];
var i = 0;
var disciRef = db.ref(exercises.node + exercises.discinames);
disciRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
disciplines["name" + i] = childSnapshot.key;
i++;
});
});
I get the list correctly, but I can not figure out how to load {{items.name}} plus the value of "i" (0-1-2-3 ...) in the paper-item. If there is another way to load the dynamic list, I am open to learning.
Thank you.

Use a property to bind to the array. Then set the list to that array property.
Polymer({
is: 'custom-element',
properties: {
disciplines:
type: Array,
value: []
}
loadItem: function(){
//finish loading items to var disciplines then
this.set('disciplines', disciplines);
}
})
you can use index inside a dom-repeat to print the value of 'i'
<paper-item value="{{item.name}}">{{index}} {{item.name}}</paper-item>
also read the doc for dom-repeat here.