I'm using vue-datatable which has the following:
<slot v-for="(row, i) in processed_rows" :row="row" :columns="normalized_columns">
And I'm trying to get the index like this:
<template slot-scope="{ row, i }">
However, i always returns as undefined.
Related
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
I have a part of the structure:
....
<template v-for="(item, INDEX) in someList">
<template v-if="thisIsArrayList(item)">
<template v-for="(_item) in item">
<Component
:item="_item"
:key="_item.id"
:myprop="checkIndex(INDEX)" - makes here some manipulation with prev and current INDEX and return iterration++ 0, 1
></Component>
</template>
</template>
<template v-else>
....
</template>
</template>
....
The INDEX can be couple times with the same value like (22, 22, 22) the next step like (25, 25) and so on ..
so I tried in props:arrayId to compare prevINDEX with the currentIndex for passing it in child like new value with iterations++
for example:
INDEX couple times equal 22 --> change it on 0 and return this value --> the next INDEX couple time equal 55 --> change it on 1 and return this value --> and so on ...
How can I do it in Vue?
Or maybe there is another solution for this logic?
Thanks.
You don't need to use an explicit variable infact v-for itself provides you the ability to extract index during iteration
<template v-for="(item, index) in items">
<Component
:item="item"
:key="item.id"
></Component>
</template>
As per the above code, the arrayId prop is not necessary, since you are no longer going to compare the indexes [since you won't have redundant values]
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;
}
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
So I have a handlebars helper that is very simple -
Handlebars.registerHelper('selectRow', (rowIndex, selectedIds) ->
console.log 'row index'
console.log rowIndex
console.log selectedIds
isSelected = _.indexOf(rowIndex, selectedIds)
if isSelected > -1
return 'class="row-selected"'
)
and I have this handlebars code -
<div class="title">{{ title }}</div>
<hr/>
<table cellspacing="0" cellpadding="0">
<thead>
{{#each columns}}
<th class="col-heading" data-heading="{{ this }}">{{ this }}</th>
{{/each}}
</thead>
<tbody>
{{#each rows}}
<tr {{#selectRow #index selected }}>
{{#each this}}
<td>
{{this}}
</td>
{{/each}}
</tr>
{{/selectRow}}
{{/each}}
</tbody>
</table>
the selected parameter is always undefined. If I add a {{ selected }} anywhere else, it shows an array, which, as you can see from below, it should -
data = #model.data()
selected = #model.get('selection').get('selected')
#$el.html(#tableContentsTemplate({
columns: #model.get('columns')
rows: data
title : #model.get('title')
selected: JSON.stringify(selected)
}))
How do I pass in the selected parameter correctly to my helper?
You're using the selected variable inside a Handlebars each loop, so I imagine selected is not in scope.
I think you're just a bit confused about how _.indexOf works. From the fine manual:
indexOf _.indexOf(array, value, [isSorted])
Returns the index at which value can be found in the array, or -1 if value is not present in the array.
So the array you're searching through, selectedIds, should be the first argument and the element you're searching for is the second. Perhaps you mean to say:
isSelected = _.indexOf(selectedIds, rowIndex)
or better (IMO):
isSelected = _(selectedIds).indexOf(rowIndex)
I generally find that using the _() function yields clearer code.
Also, shouldn't {{#selectRow #index selected }} be {{selectRow #index selected}}? A leading # should introduce a block but your helper is not written as a block helper.
Once both of the above issues have been fixed, sensible things seem to be happening for me: http://jsfiddle.net/ambiguous/pkVZc/1/