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.
Related
i'm trying to bind data rendered by alpine to livewire.
the below code render for me 5 values when i select one of them it placed in the input but when i submit the value is null i must press a key beside the value and submit to get value,any hint
<input x-on:click="open = !open" x-model="search" wire:model="manager_id">
<ul x-show="open" x-on:click.outside="open = !open" >
<template x-for="item in filteredItems" :key="item">
<li x-text="item" x-on:click="search = item,open = !open" ></li>
</template>
</ul>
tried to change the on-click to on change and it didn't work also
I'm learning vue and i'm trying to build a reusable dropdown component. After hours of work i finally got it together and now i'm stuck because all i want is to pass the button name to my vue component.
This is my dropdown:
https://imgur.com/StvEjyF
What I want is a way to pass the button name from my blade to the button.
My blade and only the string of the button name i'm trying to pass is not working:
<Dropdown>
<template slot="toggler">
<button>from blade</button>
</template>
<Dropdowncontent>
<Dropdownitems>Link1</Dropdownitems>
<Dropdownitems>Link2</Dropdownitems>
</Dropdowncontent>
</Dropdown>
My dropdown component which contains the button:
<template>
<div class="relative" v-click-outside="onClickOutside">
<slot name="toggler">
<button
#click="showCategories"
class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 text-sm font-semibold lg:inline-flex lg:w-32"
>
from vue
</button>
</slot>
<slot />
</div>
</template>
I tried to accept it as a prop so I added props: [buttonName] to export default in my component and from the blade i added :buttonName="bla bla" to the dropdown tags but it doesn't update the {{buttonName}} in the component so this didn't work.
All i need is a way to pass only the button name from blade to vue because i don't want to create the button in the blade as it's my toggle for the dropdown content and items
I fixed it by simply passing title prop to the component
Good morning,
I am creating the table with pagination in my project using v-data-table.
All is working correctly, I am just trying to add total number of pages to the pagination.
What I have now:
<v-data-table
:headers="headers"
:items="filteredList"
:items-per-page="7"
no-data-text="No results"
:footer-props="{
itemsPerPageText: 'Items per page:',
itemsPerPageOptions: itemsPerPages,
showCurrentPage: true
}"
>
</v-data-table>
The thing is, showCurrentPage displays only the number of current page (between prev/next page buttons). Is it possible to change it to something like:
Page 1 of 3?
pagination screenshot
I believe there is a slot for v-data-table that will replace the page text. Personally have not used a slot for this scenario and this example is off the top of my head but it should be along the lines of:
<v-data-table>
<template v-slot:footer.page-text="{ pageStart, pageStop, itemsLength }">
{{ pageStart }} of {{ itemsLength }}
</template>
</v-data-table>
If the slot does not work as intended, then you have the option to create a custom slot for the whole footer to add the page count. Unfortunately this will replace the default footer so you will have to recreate the other elements in the footer like items per page dropdown and page navigation.
<v-data-table>
<template v-slot:footer="{ props }">
// Every other footer element
{{ props.pagination.page }} of {{ props.pagination.pageCount }}
</template>
</v-data-table>
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>
In each set of group I wants to select one radio input by default.
each menu have multiple items. user need to select one item from each menu. so, I'm trying to select one item by default. How can I do that?
<div v-for="menu in menus">
<h4>#{{ menu.name }}</h4>
<div v-for="item in menu.menuitems">
<input type="radio" v-model="selected_items[menu.id]" :value="item" :key="item.item_id"> #{{ item.name }}
</div>
</div>
Firstly, you need to set a name attribute to the radio buttons in each menu, so that only one can be selected at a time.
And to set the first item of each menu as selected, you can use v-for index like:
<div v-for="item in menu.menuitems">
<input type="radio" v-model="selected_items[menu.id]"
:value="item.id"
:name="menu.id"
:key="item.item_id"> #{{ item.name }}
</div>
You will also need to update radio button :value from items to item.item_id and also modify :key="items.item_id" to :key="item.item_id". I think this was typo, as no variable exists in this scope like items.
and then inside mounted vue instance or any initial function inside methods you can set the values for each group item like:
mounted: function() {
this.menus.forEach(function(menu) {
this.selected_items[menu.id] = this.menu.menuitems.length ? this.menu.menuitems[0].id : null;
})
}
assuming menuitems[0] in an object with properties like item_id & name
You can still get selected item for each menu like:
this.menus.forEach(function(menu) {
var selectedItem = this.menu.menuitems.find(m => m.id == this.selected_items[menu.id]);
console.log(selectedItem)
// Retursn { id: xxx, name: 'xxx' }
})