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
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 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.
Good Evening,
I've been working on a issue for about an hour or so, I am kinda new to VueJS (and front end Dev in general).
I am trying to have a deck of cards looping through and object (using Bootstrap-Vue).
When I manually post the cards in they align correctly in groups of 3. the issue is when I iterate through the json object it seems to create one solid column.
Ill post my code (dont mind some of the names this is in a test section, im going to refactor it into a comp once its complete) in case someone wants to take a look. I am going to poke at it some more and Update in case I figure it out before someone.
Thank you in advance
<div class="about">
<h1>Dawning Recipes</h1>
<br />
<b-container>
<b-card-group deck v-for="recipes in data.recipes" :key="recipes">
<b-card
bg-variant="dark"
:header="recipes.name"
class="text-center"
style="max-width: 23rem;"
>
<b-row>
<b-col sm="auto">
<b-img thumbnail fluid :src="recipes.icon" :alt="recipes.name" />
</b-col>
<b-col class="text-left">
<b-list-group>
<b-list-group-item
variant="dark"
v-for="ingredient in recipes.ingredients"
:key="ingredient"
>{{ingredient}}</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
<b-row>
<b-row>
<b-col>
<b-card-text class="text-left ml-2 mt-3 mr-2">{{recipes.delivery}}</b-card-text>
</b-col>
</b-row>
</b-row>
</b-card>
</b-card-group>
</b-container>
</div>
</template>
<script>
import data from "../data/destiny/dawning.json";
export default {
data() {
return {
data: data
};
}
};
</script>```
Hard to say if this is the only issue, since I don't have your files, but one thing immediately sticks out:
<b-card-group deck v-for="recipes in data.recipes" :key="recipes">
:key has to be a unique string value. Since you're using recipes.name below that line, I assume recipes is an object. Vue will call toString() on this, which will always result in a String of "[object Object]", for any object, no matter the contents.
I bet the same key of [object Object] is being used, so Vue is only creating one object there from that loop.
Try using a unique value like :key="recipes.name" (assuming that is unique, ideally you have an id field)
At the very minimum to get it working, you could use index as a key, but that is essentially the same as not using a key at all:
<b-card-group deck v-for="(recipes, index) in data.recipes" :key="index">
Edit:
Just peeking at the Vue source code, it looks like you should be seeing a warning about this. It might be good to work through other warnings in there, if any.
In older version on vuetify you could access headerCell slot and easily add tooltips - see https://codepen.io/nueko/pen/dZoXeZ
In the latest version you have named slots, so you need to know header name before
<template v-slot:header.givenname="{ header }">
Is there a way to add a tooltip to all headers?
There are 2 ways to achieve this.
Option 1: Customizing whole table row
If you need to customize whole row element inside table heading this might be useful. Even though I would not recommend to follow this way if you don't want to loose sorting functionality which exist by default in v-data-table.
Example:
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<span v-on="on">{{h.text}}</span>
</template>
<span>{{h.text}}</span>
</v-tooltip>
</th>
</tr>
</thead>
</template>
Working pen: https://codepen.io/onelly/pen/QWWmpZN
Option 2: Customizing each heading without losing sorting functionality
I guess this is more like what you are trying to do and the replacement for the old way. You can loop <template v-slot:header> and use Dynamic Slot Names to accomplish this. Syntax for Dynamic slot name looks like this <template v-slot:[dynamicSlotName]>.
Example:
<template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<span v-on="on">{{h.text}}</span>
</template>
<span>{{h.text}}</span>
</v-tooltip>
</template>
Working pen: https://codepen.io/onelly/pen/ExxEmWd
I want to use Vuetify 2.0 in my project and currently reading about v-stepper component which is used to display progress through numbered steps.
In the playground example provided I see that they are using <template> element to wrap content of v-stepper component. HTML looks something like this (note: I removed unnecessary details):
<v-stepper>
<template v-for="n in steps">
<v-stepper-content
:key="`${n}-content`"
:step="n"
>
</v-stepper-content>
</template>
</v-stepper>
Notice the <template> tag used. What is the purpose of it? When should I use it as opposed to just putting the <v-stepper-content> directly inside of <v-stepper>?
I've read a bit about element on MDN but I am not sure how to use it specifically with Vuetify (or more generally with Vue.Js or just pure HTML/CSS/JS for that matter).
a <template> in the context of a v-for loop is an organizational item.
It does not get rendered by the browser. It is there to help with more complex rendering situations, where you don't want to limit yourself to a single element
In most cases you have a pretty straight forward mapping of items, each item in an array gets a <li> element. If this is the case, you're not likely to use this.
Here is an example of a problem where it might help...
Let's say you want to loop through an array of objects, and render a v-btn if the object is a button, and a v-image if the object is an image.
without template...
<span v-for="item in items">
<v-btn v-if="item.isBtn"></v-btn>
<v-img v-else-if="item.isImg"></v-img>
</span>
The problem is that each item will be wrapped in the span.
<span>
<v-btn/>
</span>
<span>
<v-img/>
</span>
<span>
<v-btn/>
</span>
If you, however, use the template element, the wrapping element is no longer there.
<template v-for="item in items">
<v-btn v-if="item.isBtn"></v-btn>
<v-img v-else-if="item.isImg"></v-img>
</template>
and you will get...
<v-btn/>
<v-img/>
<v-btn/>
You can also have it return multiple items in one instance of the loop.
in the vue docs at https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
it shows an example of rendering more than one item per iteration:
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
There are some other cases where this might be helpful but not likely something you come across on a daily basis.
TL;DR;
Vue doesn't render the <template> element. It helps organize code chunk without the need of a single child element when looping
part 2.
When should I use it as opposed to just putting the directly inside of ?
Because the structure of vertical and horizontal steppers is different, the vuetify authors used it in the playground to allow users to toggle it. The first level of template (<template v-if="vertical">) is used do determine whether the next level should render the v-stepper-step elements as vertical or as horizontal. The second level is used to do the iterating of items.
example:
vertical (step and content are siblings):
<template>
<v-stepper v-model="e6" vertical>
<v-stepper-step :complete="e6 > 1" step="1">
Select an app
<small>Summarize if needed</small>
</v-stepper-step>
<v-stepper-content step="1">
<v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
<v-btn color="primary" #click="e6 = 2">Continue</v-btn>
<v-btn text>Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="2">...</v-stepper-content>
<v-stepper-step :complete="e6 > 3" step="3">...</v-stepper-step>
</v-stepper>
</template>
horizontal (each step is separate):
<template>
<div>
<v-stepper>
<v-stepper-header>
<v-stepper-step step="1">Select campaign settings</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2">Create an ad group</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Create an ad</v-stepper-step>
</v-stepper-header>
</v-stepper>
<v-stepper value="2" class="mt-12">
...
</v-stepper>
<v-stepper value="3" class="mt-12">
...
</v-stepper>
</div>
</template>