I'm using Vuetify Datatables and I would like to use a transition on the expanded template. Is there any possibility to use the Vuetify Transition on v-slot:v-slot:expanded-item?
I wasn't able to make the transition work.
Here is my code:
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<p>ID Transakce: {{ item.transactionId }}
<p>Stav {{ item.transactionData.state }}</p>
<p>Podstav {{ item.transactionData.subState }}</p>
</td>
</template>
Thanks for you help.
Transition on expanded-item was removed for 2.x version. There are some issues open on github to to bring its back.
By the way there is a tricky solution posted on codepen: https://codepen.io/webifi/pen/ExxmXbJ
Related
I upgraded my vue application to vue2.7 and I want to remove slot-scope from my application as it is removed in vue3. So in the examples, I see this for vue2:
<ItemList>
<template slot="heading" slot-scope="slotProps">
<h1>My Heading for {{ slotProps.items.length }} items</h1>
</template>
</ItemList>
In Vue 3 it is changed to this:
<ItemList>
<template v-slot:heading="slotProps">
<h1>My Heading for {{ slotProps.items.length }} items</h1>
</template>
</ItemList>
So in my application slot-scope is used in default:
<template slot-scope="scope">
...
</template>
So how can I remove slot-scope from my application and also for vue2.7, will it be supported?
slot-scope was deprecated in Vue2 and will never return back (even in Vue3), the syntax has just changed.
So rather than writing this: slot-scope="slotProps" you need to have the following #default="slotProps".
All the details are available here: https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute
# being a shorthand for v-slot as explained here: https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand
Learning Vuetify and Vuetify (Loving both) but come across an issue I can't figure out so would appreciate someone sharing best practice please
I have created a component that contains a vuetify datatable and I pass the titles and items via props from a parent to the child, so far so good
The bit I can't figure out is that I want to loop through a specific field (the example I am using is item.calories as per the docs) and run a function over it.
I assume I pass the item.calories field as a prop but how do I then send that to a function
in my parent I pass to my DataTable component as follows
<DataTable
:headers="headers"
:content="content"
title="This is my data table title"
:myCalories="content.calories" <-- This bit is causing me the issue
/>
How in my DataTable component can I change the below to use the :myCalories prop, or is there a better approach I could consider?
<template v-slot:[`item.calories`]="{ item }">
<v-chip
:color="getColor(item.calories)"
dark
>
{{ item.calories }}
</v-chip>
</template>
My function
methods: {
getColor (calories) {
if (calories > 400) return 'red'
else if (calories > 200) return 'orange'
else return 'green'
},
},
I did wonder if I should run the function in the parent first and pass the result over but if you could advise on the best practice way to achieve the above it would be very much appreciated
Gibbo
I'm not sure it this will help but I had a similar problem and ended up using the body slot of the v-data-table and redefined my whole table.
This workaround could help you but this is certainly not the best approach to do it
<template v-slot:body="{ items, headers }">
<tbody>
<tr v-for="item in items" :key="item.name">
<td v-for="column in headers" :key="column.value">
<div v-if="column.value === 'calories'" :style="getColor(item.calories)">
{{ item[column.value] }}
</div>
<div v-else>
{{ item[column.value] }}
</div>
</td>
</tr>
</tbody>
</template>
Here is the codepen example https://codepen.io/taghurei-the-reactor/pen/YzaBNxw?editors=1111
So I have a list of objects each rendered in a list. At the same time, each list element should redirect to a specific route on click:
<template>
<b-container>
<h1 v-if="error">{{error}}</h1>
<b-table
sort-icon-left
borderless
outlined
v-else-if="coins"
#row-clicked="coinRowClickHandler"
selectable
small
:items="coins"
:fields="fields">
<template #cell(coin)="data">
<NuxtLink :to="`/${data.item.name}/dashboard`"><img :src="data.item.image" width="25" height="25"><b>{{data.item.name}}</b></NuxtLink>
</template>
<template #cell(current_price)="data">
{{ formatDollar(data.item.current_price, 20, 2) }}
</template>
<template #cell(price_change_percentage_24h)="data">
{{ formatPercent(data.item.price_change_percentage_24h) }}
</template>
<template #cell(market_cap)="data">
{{ formatDollar(data.item.market_cap, 20, 0) }}
</template>
</b-table>
<b-spinner v-else/>
</b-container>
</template>
As you can see, there is a click handler for each row click, the handler is the following:
coinRowClickHandler: function(event) {
console.log(event)
this.$router.push(`/${event.name}/dashboard`)
}
Now I am unsure which navigation method to use; whether using <NuxtLink> or programatically via this.$router.push.
The main reason I would keep the programatic navigation is simply because I do not know any other way to trigger page change on row click. On the other hand, I am afraid I would lose SEO advantages of <NuxtLink> Tag.
<nuxt-link> is basically a <router-link>, so it should have 0 benefit SEO-wise over the Vue variant.
As of what to use in your case, it's more a matter of button vs a:href. If you want to navigate to another page, it should be a link.
More details in this article: https://www.smashingmagazine.com/2019/02/buttons-interfaces/
Other advantages when using nuxt-link Nuxt can automatically prefetch pages with the prefetchLinks and prefetchPayloads options.
prefetchlinks
prefetchpayloads
I have what I think is a basic question for Vue, but I'm trying to run a method on click while also running a v-for loop on a component.
I'm not sure why but I can't get anything to run on that click handler but I see nothing in the Vue documentation saying that this isn't possible. Right now I'd settle for getting my console log running.
<IconBox
v-for="step in steps"
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
Here is the template for IconBox.vue:
<template>
<div class="icon-box">
<div
class="icon-holder"
:style="{ backgroundImage: 'url(' + step.image + ')' }"
>
</div>
<div class="text">
<div class="inner">
<h5>{{ step.name }}</h5>
<p v-if="step.description">{{ step.description }}</p>
{{ isSelected }}
</div>
</div>
</div>
</template>
I could run the click in the component itself but I need the parent well aware of what's happening to handle a selected boolean.
To use native events in component tags you should add .native modifier
<IconBox #click.native="yourMethod"/>
Check this guide.
To check it I suggest you to create a method and add console.log() inside it.
I have been playing around with Vue lately, and here's how I solved a similar problem in my project
<IconBox
v-for="step in steps"
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
Changes to
<template v-for="step in steps">
<IconBox
:key="step.slug"
:step="step"
:formData="formData"
#click="console.log('click')"
/>
</template>
I have the following template within a Vue Multiselect component.
<template slot="option" scope="props">
<div class="option__desc">
<span class="flag-icon flag-icon-{{ props.option.code }}">{{ props.option.code }}</span>
<span class="option__small">{{ props.option.name }}</span>
</div>
</template>
I need to suffix props.option.code to the flag-icon- class but Vue does not allow me to add to the class this way anymore. It requires me to do it with v-bind however I've tried to make it work with v-bind and I cannot.
Is there a way to make this work with v-bind?
try this
<span :class="'flag-icon flag-icon-' + props.option.code">