My overall objective is to add a kind of header to each column of a GridLayout. Not finding any kind of built-in support for this, I thought I might be able to add the headers as a separate element. The problem is that I'll need to know how many columns are being rendered.
The ListView has support for headers for each column that you have, unless by column you mean each column in each group in the ListView. Here's how you define the header template:
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
<button class="group-header win-type-x-large win-type-interactive" data-win-bind="groupKey: key"
onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" role="link" tabindex="-1" type="button">
<span class="group-title win-type-ellipsis" data-win-bind="textContent: title"></span>
<span class="group-chevron"></span>
</button>
</div>
Here's how to populate it on page ready:
listView.groupHeaderTemplate = element.querySelector(".headertemplate");
Related
I am working on a Layered Navigation element where I have a v-for loop on filters in an array. Filters like color, size, gender etc...
Since the amount of options in some the filters can be quite overwhelming (color for example),I would like to add a button to show more options per filter.
I currently have the following function to show more options per filter
<div v-if="showMoreFilters === false">
<div
v-for="(attribute, index) in filter.attributes"
:key="attribute.index">
<div class="layered-navigation__item"
v-if="index < filter.facetsettings.nrofshownattributes"
>
<SfFilter
:label="attribute.title"
:count="attribute.nrofresults"
:selected="attribute.isselected"
#change="function(x)>
</SfFilter>
</div>
</div>
</div>
<div v-else>
<div
v-for="attribute in filter.attributes"
:key="attribute.index"
>
<div class="layered-navigation__item">
<SfFilter
:label="attribute.title"
:count="attribute.nrofresults"
:selected="attribute.isselected"
#change="function(x)">
</SfFilter>
</div>
</div>
</div>
</div>
<sfButton #click="showMoreFilters = !showMoreFilters">
Show more filters"
</sfButton>
The desired, initial, amount of filter-options per filter is given within each filter:
filter.facetsettings.nrofshownattributes
The problem, however, is that if I press the button (showMoreFilters), all filters show all of their options. Not just the array of option of the filter I clicked on. How could I resolve this?
The problem is that there are many filters but only one showMoreFilters flag. Consider adding a showMore property to every filter's facetsettings object...
<div v-if="!filter.facetsettings.showMore">
...
<sfButton #click="filter.facetsettings.showMore != filter.facetsettings.showMore">
Show more of just this filter"
</sfButton>
I'm trying to get Vue-Draggable to work with dynamic lists. I've got it working fine with static lists, but anything dynamic just doesn't seem to work.
Here is the script I've got at the moment:
<template v-for="(group, groupkey) in managegroupmodal.groups">
<div :key="'draggroup-' + groupkey">
<h4>{{ group.emoji }} {{ group.title }}</h4>
<draggable
:list="managegroupmodal.groups[groupkey].sets"
group="manageModalGroup"
class="alert row shadow-sm m-1 gutter-b minh50"
>
<span
class="btn btn-sm btn-font-sm font-weight-bold m-1 btn-light-success"
v-for="myelement in managegroupmodal.groups[groupkey].sets"
:key="'dragitem-' + myelement.id"
>{{ myelement.emoji }} {{ myelement.title }}</span
>
</draggable>
</div>
</template>
The issue is that whenever I drag and drop and element from one list to another it just goes back to it's initial list. I can't even drag & drop elements within a list to reorder them.
Is there something I'm missing?
Thanks
Ok I was able to fix the issue. It looks like one of the elements of the list had an extra key that some of the other elements of the list didn't have and it broke the script for some reason...
I've since cleaned everything up, made sure that all the elements of the list are formatted the exact same way, and it works as expected!
I'm trying to change text inside div elements that contain html tags into actual html. I have a v-for loop which lists all the text items into divs.
<li v-for="item in items">
<div id="description" class="content">{{item.description}}</div>
</li>
The whole text just includes the html element rather than turning it into html which is not what I want.
I thought about pumping it through a function that would call document.innerHTML() on it but Im not sure how to make the parent have a unique ID to call it on. I'd like to keep track of the parent the item is from with either an unique ID or as some sort of parameter.
Answering this for anyone who doesn't read the comments like me :-)
v-html will render an HTML snippet to the page.
The second part of your question involves telling Vue that each element is unique. You do this with a :key. These give Vue's Virtual DOM a unique ID for your element. You can use a unique element in your data for the key or an iteration number.
If you will need to access the ID for something else OUTSIDE of Vue's reactivity, use a Vue ref.
So combining all of that your code becomes:
<li v-for="item in items" :key="item.name" ref="myItems">
<div id="description" class="content" v-html="item.description"></div>
</li>
or with a number for the key
<li v-for="(item, n) in items" :key="n" ref="myItems">
<div id="description" class="content" v-html="item.description"></div>
</li>
Note: when ref's are used in a v-for they produce an array. So in this case myItems.length == items.length and myItems[n] is a unique reference.
I am leveraging vuejs to pull data into my project. I have this simple request of waiting to hide the Certification text if I have no data in the v-for. IS there a super easy way to achieve this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<p style="text-align:left;"> <strong>Certification:</strong> <span v-for="certification in getCertText(selectedJob)" href="#" v-on:click="updateCertfication(certification)" >{{certification}} </span></p></br>
Just check if array is empty.
<strong v-if="getCertText(selectedJob).length > 0">Certification:</strong>
This should work
I'm not sure if this is possible in VUEJS.
I want to repeat an element a specific number of times (by passing a number on the #click of a button). Please see below sample code:
<button #click="function"> where it will tell how many time to repeat
<li v-for="item in (value from btn click)">test</li>
when I add code like
<li v-for="item in 4">
it works but I need this repeat (4) on click of button.
v-for with a range
v-for can also take an integer. In this case it will repeat the
template that many times.
<span v-for="n in 10">{{ n }} </span>
You can use a data item instead of a constant.
new Vue({
el: '#app',
data: {
n: 4
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<span v-for="i in n">{{i}}</span>
</div>
You can pass a number from your button, catch it in a method, and add it to the number you're using to loop. If you want the loop to be one element longer each click, you can pass it 1.
<button #click="addToLoop(1)">
See example: https://jsfiddle.net/56rnv91j/
From documentation: "v-for can also take an integer. In this case it will repeat the template that many times." link