I have a for loop in my alpine.js code
<template x-for="(value, index, collection) in forecastQ4Values" :key="index">
<div class="..."><span x-text="value"></span></div>
</template>
How can I add a class only to the last item in the for loop?
Basically I want to hide the last element until some variable changes.
For instance like this, but only on the last item.
<template x-for="(value, index, collection) in forecastQ4Values" :key="index">
<div :class="{ 'invisible': !productDActive }" class="..."><span x-text="value"></span></div>
</template>
Thanks
If you have access to index my first thought would be to check where you are in the loop. Like so:
<template x-for="(value, index, collection) in forecastQ4Values" :key="index">
<div :class="{ 'invisible': (forecastQ4Values.size == index+1) }" class="..."><span x-text="value"></span></div>
</template>
Related
I have the following template:
<template>
<q-item tag="label" v-ripple>
<q-popup-edit
v-model="editedModel"
#before-show="onFieldClick"
#save="setValue"
:cover="false"
fit
buttons
>
<template v-slot:title>
<div class="text-mono">{{ name }}</div>
</template>
<q-select
dense
autofocus
emit-value
v-model="editedModel"
multiple
:options="options"
counter
/>
</q-popup-edit>
<q-item-section>
<q-item-label class="text-mono">{{ name }}</q-item-label>
<q-item-label caption>{{ description }}</q-item-label>
<q-item-label caption>{{ model }}</q-item-label>
</q-item-section>
</q-item>
</template>
The #save method is never called. What do I miss? Thanks.
For me worked the following:
I added: v-slot="scope" to the q-popup-edit
<q-popup-edit v-model="initialValue" v-slot="scope" buttons #save="save">
and then I replaced my v-model inside q-input to this:
<q-input v-model="scope.value" >
could you please help?
I 'm trying to add a count down according to some property in a loop but I could not find any way (not by trying out nor by googling) how I could pass that value in my functions:
<template x-for="item in cartData.items">
[...]
<template x-if="item.product_type == 'test'">
<div x-data="getCountdown()" x-init="init()">
<span x-text="timeLeft(item.timerEnd)"></span>
</div>
<script type="text/javascript">[...]
</script>
</template>
</template>
I was trying to pass item.timerEnd to every functon (getCountdown, init and timeLeft) but I always get the error that item is undefined, wheras if I pass it eg. to
<span x-text="new Date(item.timerEnd).toLocaleString()"></span> this works.
What am I missing?
PS: Thanks fpr the first help here: How to make timer in alpine.js app with time interval
Do this $data.item.timerEnd.
Like this:
<template x-for="item in cartData.items">
[...]
<template x-if="item.product_type == 'test'">
<div x-data="getCountdown($data.item.timerEnd)" x-init="init($data.item.timerEnd)">
<span x-text="timeLeft($data.item.timerEnd)"></span>
</div>
<script type="text/javascript">[...]
</script>
</template>
</template>
I have created Vue template which works fine when it is not used inside #if , but it return black if used inside #if.
Here is my template
<template>
<div>
<usage-token-button :tokens="usageTokens" v-on:use-token="useComplimentaryToken">
<template v-slot:default="data">
<span class="d-inline-block">
ABC
</span>
</template>
<template v-slot:use-button>ABC</template>
</usage-token-button>
<usage-token-button :tokens="researchPasses" v-on:use-token="useResearchPassToken">
<template v-slot:default="data">
<span class="d-inline-block">
ABC
</span>
</template>
<template v-slot:use-button>ABC</template>
</usage-token-button>
</div>
</template>
and this is how it is called
#if(!isset($showdata))
<usage-token-access
doi="{{ $content->metaInfo()['content']->doi }}"
root="{{ config('app.subdir') ? config('app.subdir') : '/' }}">
</usage-token-access>
#endif
I have confirmed it is going inside if condition , and when I inspect it I can see blank div as show in screenshot
I'd like to figure out how to hide the index/result on an empty search query.
In my blade I have the code (slightly modified from the official documentation):
<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>
<ais-state-results>
<template slot-scope="{ state: { query } }">
<ais-hits v-if="query.length > 0">
<div slot="item" slot-scope="{ item }">
<h2>#{{ item.Title}}</h2>
<p>#{{ item.Text}}</p>
</div>
</ais-hits>
</template>
</ais-state-results>
</ais-instant-search>
If I enter a search query this works fine, but on empty query this displays the following unwanted notification on my page (instead of the before unwanted index):
Use this component to have a different layout based on a certain state.
Fill in the slot, and get access to the following things on the slot-scope:
results: [
"_rawResults",
"hits",
"nbHits",
[..]
How can I hide this notification?
Ah, I just found a solution I think.
This notification text is displayed if there's no DOM element inside <ais-hits>. And in case of no query there isn't, since "v-if" removes that. So If instead of "v-if" I use "v-show" it works as I need it, since the DOM element still exists, but isn't displayed (display:hidden).
<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>
<ais-state-results>
<template slot-scope="{ state: { query } }">
<ais-hits v-show="query.length > 0">
<div slot="item" slot-scope="{ item }">
<h2>#{{ item.Title}}</h2>
<p>#{{ item.Text}}</p>
</div>
</ais-hits>
</template>
</ais-state-results>
I know that I can get the row selected using the event "click:row" in my Datatable component, but I need to get the specific cell that I had clicked
You can use slots for that. Add it inside of your table component like given below:
<template v-slot:item.name="{ item }">
<div #click="rowClicked(item)">
<v-icon
class="mr-2"
color="#54a1e0"
large
>{{ "mdi-folder" }}
</v-icon>
{{ item.name }}
</div>
</template>
Here, you call a "rowClicked" method and you pass the clicked item when there is a click on "name" field that you also customise within the template.