I have this array I'm using v-for to create 3 columns of info. In each column is an image. When I mouse over 1 column/image I want to change JUST that image, none of the others. How can I accomplish this with Vue?
My Vue code looks like this:
<v-row
align="center"
justify="center"
>
<v-col cols="4"
v-for='(billingPlan, index) in billingPlans.basicPlans'
:key='billingPlan.id'
>
<v-img
:src="whichRose"
#mouseenter="switchRose(index)"
>
</v-col>
</v-row>
I'm thinking I can somehow target the image by its index, but I'm not having any luck.
Any ideas on what I can do?
Maybe something like this will work?
<v-row
align="center"
justify="center"
>
<v-col cols="4"
v-for='(billingPlan, index) in billingPlans.basicPlans'
:key='billingPlan.id'
>
<v-img
:src="billingPlan.hovered ? billingPlan.image2 : billingPlan.image1"
#mouseenter="billingPlan.hovered = true"
>
</v-col>
</v-row>
Would also need to add functionality if you want the image to change when you hover away.
Edit: To ensure proper reactivity, each billingPlan should have the property hover initiated to 0 before the component is created so that the reactive src attribute knows to rerender when hover changes.
Related
I recently started using vuetifyjs in my RTL project (written in Vue 2). I added a table in a card and I added the search bar as it's shown in the docs. I'm trying to do two things:
Move the "number of items to show" option from the footer to the top.
Make the search bar expendable from an icon.
Basically:
For the first case, I could not find a way to do this in the docs. For the second case, I'm trying to achieve this output:
I tried to look in the docs as well, but could not find a way to do this. I also came across with this article: Expand Searchbar with Search icon as well as show close icon onclick using Javascript
My current code:
<div>
<v-card>
<v-card-title>
<v-text-field
v-model="searchText"
append-icon="mdi-magnify"
label="חיפוש"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
class="elevation-1"
:headers="headers"
:items="items"
:items-per-page="itemsPerPage"
:footer-props="settings"
>
</v-data-table>
</v-card>
</div>
Where:
settings: {
'items-per-page-options': [10, 25, 50, 100],
'items-per-page-text': 'סהכ'
},
itemsPerPage: 10
Is it possible to achieve this using vuetify?
https://codepen.io/pradipta-chatterjee/pen/YzaJXeW
<v-text-field
v-model.trim="searchText"
dense
filled
rounded
clearable
placeholder="Search"
prepend-inner-icon="mdi-magnify"
class="pt-6 shrink expanding-search"
:class="{ closed: searchBoxClosed && !searchText }"
#focus="searchBoxClosed = false"
#blur="searchBoxClosed = true"
></v-text-field>
Check the codepen i feel, i have what you were looking for.
I have a modal with a small form (Select and list with multiple select). I can save my values. But after saving I want to close the modal and while closing clear every form field in this case my list selection and selectbox values, right now they are still the first value I selected before closing. Could someone give me a pointer on how to do it?
I thought of putting everything inside a form tag and maybe trying to achieve it from their, but do not know if it is a correct way. these are the selections I want to clear. The binded arrays I can already clear out. But not the select in the list
html:
<v-row>
<v-col cols="4" >
<v-select
:items="availableTimes"
item-text="date"
#select="filterByDate"
v-model="selectedDate"
></v-select>
</v-col>
<v-col cols="8">
<v-chip-group
v-model="selection"
active-class="deep-purple--text text--accent-4">
<v-chip
v-for="(time, i) in dateTimeArray"
:key="time.id"
:value="time"
v-on:click="getTimeValue(times)"
#click="getTimesFiltered(time)">
{{ time.startTime +" - "+ time.endTime }}
</v-chip>
</v-chip-group>
</v-col>
</v-row>
<v-row>
<v-col cols="4">
<v-card>
<v-list>
<v-list-item-group
v-model="model"
multiple
color="blue"
>
<v-list-item
v-for="(item, i) in voterArrayFilteredByTime"
:key="item.id"
:value="item">
<v-list-item-content>
<v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
It would be helpful if you show your script tags.
Without seeing what you are trying to do, my suggestion would be to use reset your "selection" variable in your methods. For example if you have a close button
<v-btn #click="resetStuff" >Close me<v-btn>
Then in your method:
methods: {
// your method
resetStuff() {
this.selection = null
//.. some more variables to reset
}
hello every one I am trying to get a specific element in my table and add a class to it to make the red buttons green when an image is uploaded. But i can't get the specific row in my table. Any one a solution for this?
My code:
<b-table hover
:filter="filter"
id="my-table"
:bordered="bordered"
:fields="fields"
:items="items"
:per-page="perPage"
:current-page="currentPage"
responsive
striped
small>
<template v-slot:cell(actions)="row">
<b-button id="btnImage" size="sm" #click="info(row.item, $event.target)" class="addModal mr-2" ref="addModal">
<font-awesome-icon :icon="['fas', 'image' ]" />
</b-button>
</template>
</b-table>
If i do this: var tr = document.getElementById("my-table").getElementsByTagName("tr"); I get the following output:
inside every tr is an element thats called innerText that reference to the id that you can see here in my table:
But how do i get the specific row in my table and add an class to the button of that specific row?
Use scoped field slots
<template v-slot:cell(nameage)="data">
{{ data.item.name.first }} is {{ data.item.age }} years old
</template>
Refer https://bootstrap-vue.org/docs/components/table#scoped-field-slots. I think it's well documented.
For every one that needs it. I fixed the problem to give row.item as a parameter to my method very simple but is works great
I've two radio buttons. On the second radio button I want put 3 components and align the size width to fit on a unique line (row). They are a radio button and 2 select fields using Vuetify.
At the moment the components are on 3 rows, but I don't know how to put it into a unique row into 3 columns. I has followed the grid system from Vuetify.
<v-flex xs12>
<v-radio-group v-model="paymentType" column>
<v-radio :label="getCurrentMonthText()"></v-radio>
<v-container>
<v-row no-gutters>
<v-col cols="12" sm="4">
<v-radio label="Outro mês"></v-radio>
</v-col>
<v-col cols="12" sm="4">
<v-select label="Mês" :items="monthNames" v-model="monthSelected"></v-select>
</v-col>
<v-col cols="12" sm="4">
<v-select label="Ano" :items="years" v-model="yearSelected"></v-select>
</v-col>
</v-row>
</v-container>
</v-radio-group>
</v-flex>
Result:
If I understand your question correctly, you want to have the "Outro Mes" radio button, the "Mes" selector, and the "Ano" selector all in the same row.
Your code is doing that right now for window sizes larger than "sm" in the vuetify grid system. When I run it on my machine, I get this:
Window size larger than "sm"
Window size "sm"
If you want to have the radio button on the same row as the selects at all times, even when the window size is "sm", then you simply need to change each column to [cols="4"].
If I'm not understanding your question correctly, please leave a comment with clarification.
Using vuetify, how can I make two UI components show up on one singular page? I have tried combining elements within one bracket and got error messages. When stacking components in separate only thee bottom template appears in the front end. Is there a way two stack UI components using vue-router?
edit: my goal is to place two ui components such as photo grid and carousel from vuetify on top each other to create a print out similar to this screenshot mash-up.
This is the code that produces my current localhost printout code sample of stacking templates and the localhost printout.
<template>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<v-flex
v-for="n in 9"
:key="n"
xs4
d-flex
>
<v-card flat tile class="d-flex">
<v-img
:src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
aspect-ratio="1"
class="grey lighten-2"
>
<v-layout
slot="placeholder"
fill-height
align-center
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-layout>
</v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</v-layout>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
></v-carousel-item>
</v-carousel>
</template>
Your problem is you have two template tags, if you move the content of the bottom template tag into the first one it should work. It should look something like this:
<template>
<div>
<v-layout>
v-card etc...
</v-layout>
<v-carousel>
v-carousel-item etc...
</v-carousel>
</div>
</template>
<script>
javscript code...
</script>
As #sumurai8 said, you should only have one top level template tag.