I have a component in Vue like this:
Tags.vue
<template>
<div>
<v-chip
v-for="tag in tags"
:key="tag"
class="ma-2"
label
x-small
color="blue"
text-color="white"
>
{{ tag }}
</v-chip>
</div>
</template>
<script>
export default {
name: 'Tags',
props: {
tags: {
type: Array,
default: () => ['Empty'],
},
},
}
</script>
This is the result
How can I make them appear one below the other instead of side by side?
This should be a css questions. Add a class "container" for the wrapper div and put some css into it. You can use flex-box
<div class="container">
<v-chip
v-for="tag in tags"
:key="tag"
class="ma-2"
label
x-small
color="blue"
text-color="white"
>
{{ tag }}
</v-chip>
</div>
<style lang="scss" scoped>
.container{
display: flex,
flex-direction: 'column'
}
</style>
This is another solution without css:
I use tag https://vuetifyjs.com/en/components/chip-groups/
<template>
<div class="container">
<v-chip-group column active-class="primary--text">
<v-chip
v-for="tag in tags"
:key="tag"
class="ma-2"
outlined
x-small
color="blue"
text-color="blue"
>
{{ tag }}
</v-chip>
</v-chip-group>
</div>
</template>
<script>
export default {
name: 'Tags',
props: {
tags: {
type: Array,
default: () => ['Empty'],
},
},
}
</script>
Related
I need to have each vuedraggable item to have different styling in the wrapper tag (for example based on the element's index) like so:
<div class="wrapper">
<div class="grid_item" style="grid-row: 1">
I am Item 1
</div>
<div class="grid_item" style="grid-row: 2">
I am Item 2
</div>
<div class="grid_item" style="grid-row: 3">
I am Item 3
</div>
</div>
I know this is a very simple example that doesn't really need the index but suppose a more complex scenario where it is necessary to have access to the index in the draggable component (not its child template).
Suppose the current component looks like this:
<template>
<div class="wrapper">
<draggable
:list="items"
class="grid_item"
item-key="name">
<template #item="{ element }">
I am {{ element.name }}
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
items: [
{
name: 'Item 1'
},
{
name: 'Item 2'
},
{
name: 'Item 3'
},
],
}
},
methods: {
rowForItem(index) {
return `grid-row: ${index + 1}`;
}
},
}
</script>
<style>
.wrapper {
display: grid;
}
.grid_item {
background-color: gray;
}
</style>
How can I make use of the rowForItem method here?
<script>
export default {
name: "TestTailwind",
};
</script>
<script setup></script>
<template>
<div class="">
<div v-for="i in 20" :key="i" :class="[`m-${i}`]">m-{{ i }}</div>
<div v-for="i in 20" :key="i" :class="[`p-${i}`]">p-{{ i }}</div>
</div>
</template>
<style lang="scss" scoped>
</style>
I try to use dynamic class , but tailwind not give me the class right.
Expect:
It's because of tailwind tree shaking. You need to add the classes you want to generate dynamically to the safelist in your tailwind.config file because tailwind can't detect used classes with this dinamic syntax.
Here is the code:
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
'p-1',
'p-2',
'p-3',
// ...
],
// ...
}
You can read the docs here
I have a Vuetify project. I'm using the template with a slot group.header, so far so good.
Now I want to use a <v-spacer> in this template. Its in a <v-sheet>.
When I use the <v-spacer></v-spacer> I expect the content on the same line. But it will be on the next line. How can I display the button after the spacing on the same line, user Vuetify's system?
codepen
https://codepen.io/h3ll/pen/VwWOxdJ?editors=1010
HTML
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-group-by
>
<template v-slot:group.header="{items, isOpen, toggle}">
<th #click="toggle" colspan="12" class="ma-0 pa-0">
<v-sheet>
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].category }}
<v-spacer></v-spacer>
<v-btn x-small>I WANT TO BE ON THE RIGHT SIDE</v-btn>
</v-sheet>
</th>
</template>
</v-data-table>
javascript
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
groupable: false,
},
{ text: 'Category', value: 'category', align: 'right' },
{ text: 'Dairy', value: 'dairy', align: 'right' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
dairy: 'Yes',
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
dairy: 'Yes',
},
...
],
}
},
})
Update
I can fix it with normal css like
<template v-slot:group.header="{items, isOpen, toggle}">
<th colspan="12">
<v-sheet>
<div #click="toggle" style="display: inline; width: 100vw">
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].folder }}
</div>
<div style="display: inline; float: right;">
<v-icon #click="deleteItem(item)">mdi-dots-vertical</v-icon>
</div>
</v-sheet>
</th>
</template>
```
But I wondering why Vuetify v-spacer is not working
v-spacer is basically just a div with the style flex-grow: 1. So to get this to work the parent container of the v-spacer needs to have display: flex.
In your case you can add this to v-sheet:
<v-sheet class="d-flex">
<!-- content -->
</v-sheet>
I am trying to pass a parameter to a function by looping through an the array items with v-for.
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y"></h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:#click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
drawer: false
}),
methods: {
change(val) {
console.log(val);
this.$refs.y.innerText = val;
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
I want the parameter in items arrray to be passed to change(val) method giving each v-list-item a distinct event listener.
Then I want h1 with the ref="y" to change it's text based on the v-list-item I click. But so far I am getting the browser error of "Error in render: "TypeError: Cannot set property 'innerText' of undefined""
Instead of setting the innerText of the <h1> you could instead bind the innerText to a reactive variable. You could create a variable in data that could store the selected method and then bind that to the innerText using {{}} syntax. Doing it this way would be more inline with Vue best practices. Let me show you what I mean.
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y">{{ selectedMethod }}</h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:#click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
selectedMethod: '', // Initially blank
drawer: false
}),
methods: {
change(val) {
this.selectedMethod = val; // Update the value of selectedMethod
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
Hope this helps!
I want to add a conditional style in my Component.
My component is below:
<site-pricing
color="primary"
currency="$"
price="25"
to="/purchase"
>
<template v-slot:title>Complete</template>
<template v-slot:desc>{{ $t('plans.completeDesc' )}}</template>
<template v-slot:planSuffix>/ {{ $t('plans.oneTime' )}}</template>
<template v-slot:features>
<ul>
<li>{{ $t('plans.xchats', [ 200 ] )}}</li>
<li>{{ $t('plans.sDomain' )}}</li>
</ul>
</template>
<template v-slot:footer>{{ $t('plans.oneTime' )}}</template>
</site-pricing>
I want to add a special style just like, if 'color = primary', then add a border-top: 5px red...
You should use the conditional style binding for vue. I'll show an example:
new Vue({
el: '#app',
data: {
color: "secondary"
},
methods: {
toggleColor(val) {
this.color = val
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :style="[color==='primary' ? {color: 'red'} : {color: 'blue'}]">Primary</div>
<div :style="[color==='secondary' ? {color: 'red'} : {color: 'blue'}]">Secondary</div>
<button #click="(e) => toggleColor('primary')">Switch to pirmary</button>
<button #click="(e) => toggleColor('secondary')">Switch to secondary</button>
</div>