So i am making a small list in which i have a list of car companies and an option for users to select their favorite one. I have an array of objects which returns the name and a certain property named starred. I have a method setStarred which sets the starred of selected to true. But what i am trying to achieve is to have the option to only select one at a time, so if i select BMW, the starred for other two should be toggled to false. Right now i can toggle all of them at the same time.
Please check this working codepen.
Check out the working example below:-
new Vue({
el: '#app',
data() {
return {
cars: [{
name: 'Toyota',
starred: false
},
{
name: 'BMW',
starred: false
},
{
name: 'Ford',
starred: false
}
]
}
},
methods: {
setStarred(item) {
item.starred = !item.starred
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center column>
<v-flex xs6 v-for="(car,index) in cars" :key="index">
<h2>{{car.name}}
<v-icon :color="car.starred ? 'primary': '' " #click="setStarred(car)">star_border
</v-icon>
</h2>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
Any help will be appreciated. Thank you.
You have to loop throw other array items and set their starred property to false. Or, you can store a data variable to indicate the index of the object which is currently stared.
new Vue({
el: '#app',
data() {
return {
cars: [{
name: 'Toyota',
starred: false
},
{
name: 'BMW',
starred: false
},
{
name: 'Ford',
starred: false
}
],
lastStarredIndex: null
}
},
methods: {
setStarred(index) {
if (this.lastStarredIndex === index) {
// toggle same item
this.cars[index].starred = !this.cars[index].starred;
if (this.cars[index].starred) this.lastStarredIndex = index;
else this.lastStarredIndex = null;
} else {
// disable last stared item
if (this.lastStarredIndex !== null) this.cars[this.lastStarredIndex].starred = false;
// set the new one
this.cars[index].starred = true;
this.lastStarredIndex = index;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center column>
<v-flex xs6 v-for="(car,index) in cars" :key="index">
<h2>{{car.name}}
<v-icon :color="car.starred ? 'primary': '' " #click="setStarred(index)">star_border
</v-icon>
</h2>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
data() {
return {
cars: [{
name: 'Toyota',
starred: false
},
{
name: 'BMW',
starred: false
},
{
name: 'Ford',
starred: false
}
]
}
},
methods: {
setStarred(item) {
// Set all to false
_.each(this.cars, function(value, key) {
value.starred = false;
});
item.starred = true
}
}
})
Solution
new Vue({
el: "#app",
data() {
return {
cars: [
{
name: "Toyota",
starred: false,
},
{
name: "BMW",
starred: false,
},
{
name: "Ford",
starred: false,
},
],
};
},
methods: {
setStarred(item) {
this.cars.forEach((car) => (car.starred = car.name === item.name));
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center column>
<v-flex xs6 v-for="(car,index) in cars" :key="index">
<h2>{{car.name}}
<v-icon :color="car.starred ? 'primary': '' " #click="setStarred(car)">star_border
</v-icon>
</h2>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
<v-icon :color="car.starred ? 'primary': '' " #click="setStarred(index)">star_border
</v-icon>
methods: {
setStarred(index) {
this.cars.map(i => {
i.starred = false
})
this.cars[index].starred = true
}
}
Related
In Vue2 this seems to be break:
<template>
<v-list v-model="itemSelected">
<v-list-item v-for="(item, i) in items" :key="i" #click="item.onClick"
>item.label</v-list-item>
</template>
<script>
export default {
name: 'myTestComponent'
data: () => ({
itemSelected,
items: [
{ label: 'Logout', onClick: this.onLogoutClick },
{ label: 'Settings', onClick: this.onSettingsClick },
{ label: 'Profile', onClick: this.onProfileClick },
]
}),
methods: {
onLogoutClick() {
console.log('LogoutClick')
},
onSettingsClick() {
console.log('SettingsClick')
},
onProfileClick() {
console.log('ProfileClick')
},
},
</script>
The error is that onLogoutClick is a null reference. This seems to indicate to me that the data property is created before the methods property.
Is there a way around this? Perhaps to pass the method names as a string and convert that reference to a method name at call time?
You can pass vue instance to data function, and call methods in onClick property :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: (vi) => ({
itemSelected: null,
items: [
{ label: 'Logout', onClick: vi.onLogoutClick },
{ label: 'Settings', onClick: vi.onSettingsClick },
{ label: 'Profile', onClick: vi.onProfileClick },
]
}),
methods: {
onLogoutClick() {
console.log('LogoutClick')
},
onSettingsClick() {
console.log('SettingsClick')
},
onProfileClick() {
console.log('ProfileClick')
},
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-list v-model="itemSelected">
<v-list-item v-for="(item, i) in items" :key="i" #click="item.onClick"
>{{item.label}}</v-list-item>
</v-list>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I'm wondering if there is a way to hide a whole row/item in a vuetify data-table. I've read threads about hiding columns but not data-table items.
As per my understanding, You want to hide the specific rows from the <v-data-table>. If Yes, you can achieve that by using v-slot and manipulate the template.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert',
value: 'name'
}
],
items: [
{
name: 'Frozen Yogurt',
show: true
},
{
name: 'Ice cream sandwich',
show: false
},
{
name: 'Eclair',
show: true
},
{
name: 'Cupcake',
show: false
}
]
}
},
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="items"
class="elevation-1"
>
<template v-slot:item="props">
<template v-if="props.item.show">
<tr>{{ props.item.name }}</tr>
</template>
</template>
</v-data-table>
</v-app>
</div>
I think passing an empty array to your :items would fix your problem. or you can do this one :items="defaultVales || desserts".
In my opinion, the best way to handle this is to add a show property to your objects and use a computed property to hide and show items
Working example
Here it will hide column on click
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed:{
showItems(){
return this.desserts.filter(x => x.show)
}
},
data() {
return {
headers: [
{ text: 'Name', value: 'name' },
{ text: 'Score', value: 'score' },
],
desserts: [{
name: "Frozen",
score: 66,
show: true,
},
{
name: "Tom",
score: 100,
show: true,
},
{
name: "Eclair",
score: 100,
show: true,
},
{
name: "Frozen",
score: 89,
show: true,
},
]
}
},
methods: {
hideColumn(col){
col.show = false
}
}
})
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify#2.3.4/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify#2.3.4/dist/vuetify.min.js'></script>
<div id="app">
<v-data-table
:items="showItems"
:headers="headers"
#click:row="hideColumn"
>
</v-data-table>
</div>
I tried to use select all (as a checkbox) to select all result that what I search for, but it's still selected all data in table and I use employee.map for loop my selection all data in table. Can somebody help me?
here is my code :
<template>
<div>
<v-container>
<v-row>
<v-col cols="12" md="6" sm="8">
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-col>
</v-row>
</v-container>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-data-table
:headers="headers"
:items="employee"
:single-select="singleSelect"
item-key="empname"
:search="search"
:sort-by="['check', 'id']"
:sort-desc="true"
class="elevation-1"
>
<template v-slot:item.check="{ item }">
<v-simple-checkbox v-model="item.check"></v-simple-checkbox>
</template>
</v-data-table>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-checkbox
label="Select All"
style="direction: rtl"
#click="allSelected()"
></v-checkbox>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
data: () => ({
singleSelect: false,
selected: [],
search: '',
headers: [
{
text: 'ID',
align: 'start',
value: 'id',
},
{ text: 'Employee Name', value: 'empname', sortable: false },
{ text: 'Job', value: 'job', sortable: false },
{ text: 'Check', value: 'check', sortable: false, align: 'center' },
],
employee: [],
}),
watch: {
dialog(val) {
val || this.close()
},
dialogDelete(val) {
val || this.closeDelete()
},
},
created() {
this.initialize()
},
methods: {
allSelected() {
this.employee.map((emp) => {
emp.check = !emp.check
console.log(emp.check)
})
},
initialize() {
this.employee = [
{
id: '1',
empname: 'Joel',
job:'Doctor',
check: false,
},
{
id: '2',
empname: 'Lisa',
job:'Nurse',
check: false,
},
{
id: '3',
empname: 'Vera',
job:'Doctor',
check: false,
},
{
id: '4',
empname: 'Leo',
job:'Nurse',
check: false,
},
]
},
},
}
</script>
if there is anything that I did wrong more than what I expected. I apologize. and Thanks for Helping me.
I'm not sure about what you want to do, if you want that checkbox to be use to select the employees, or if that checkbox represent a data about the employee (e.g: isVaccinated)
If you want to select the employees: You can use the API of v-data-table:
Add a v-model and a show-select to v-data-table:
<v-data-table
:headers="headers"
v-model="selected"
:items="employee"
:single-select="singleSelect"
show-select
item-key="empname"
:search="search"
:sort-by="['check', 'id']"
:sort-desc="true"
class="elevation-1"
>
Then you can delete the field "check" of the employees, the custom checkbox, the methods related to check and uncheck because you don't need it, everything is handle by v-data-table:
<template>
<div>
<v-container>
<v-row>
<v-col cols="12" md="6" sm="8">
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-col>
</v-row>
</v-container>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-data-table
:headers="headers"
v-model="selected"
:items="employee"
:single-select="singleSelect"
show-select
item-key="empname"
:search="search"
:sort-by="['check', 'id']"
:sort-desc="true"
class="elevation-1"
>
</v-data-table>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
data: () => ({
singleSelect: false,
selected: [],
search: "",
headers: [
{
text: "ID",
align: "start",
value: "id",
},
{ text: "Employee Name", value: "empname", sortable: false },
{ text: "Job", value: "job", sortable: false },
],
employee: [],
}),
watch: {
dialog(val) {
val || this.close();
},
dialogDelete(val) {
val || this.closeDelete();
},
},
created() {
this.initialize();
},
methods: {
initialize() {
this.employee = [
{
id: "1",
empname: "Joel",
job: "Doctor",
},
{
id: "2",
empname: "Lisa",
job: "Nurse",
},
{
id: "3",
empname: "Vera",
job: "Doctor",
},
{
id: "4",
empname: "Leo",
job: "Nurse",
},
];
},
},
};
</script>
Tell me if it was the solution you expected
I have a v-select component from vuetify. I need to use boolean in this component with true, false and null options and I'm looking for solution how to do it in correct way
My code:
select.js
<template>
<v-row align="center">
<v-col cols="12">
<v-select
:items="items"
readonly
label="Read-only"
></v-select>
</v-col>
</v-row>
</template>
script.js
<script>
export default {
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}
</script>
To use boolean values and null, your items should have the following structure :
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
items: [
{
text: "true",
value: true
},
{
text: "false",
value: false
},
{
text: "null",
value: null
}
]
})
});
The title says it all. I want to filter my bootstrap table with an input box.
Here is my .html part of the component:
<b-table
:items="Table"
:fields="fields"
striped
small
>
</b-table>
Here is the .vue file
<template src="./jointable.component.html"> </template>
<style scoped src="./jointable.component.css"> </style>
<script>
import axios from 'axios'
export default {
name: 'jointable',
data(){
return {
Table: [],
fields: [
{key: 'client_id', label: "School Code", sortable: true},
{key: 'client_name', sortable: true},
{key: 'uuid', label: "ID", sortable: true},
{key: 'step', label: "Job Running", sortable: true},
{key: 'serverid', sortable: true},
{key: 'create_timestamp', label: "Job Start", sortable: true},
{key: 'time_elapsed', sortable: true},
{key: 'wh_db_host', sortable: true}
]
}
},
methods : {
loadData: function(){
axios.get("http://192.168.56.101:5000/jointable")
.then((res) => {
this.Table = res.data
})
.catch((err) => {
console.log(err)
})
}
},
mounted() {
this.loadData();
setInterval(function(){
this.loadData()
}.bind(this), 10000)
},
computed() {
}
}
</script>
So right now you can see that my script reloads the table every 10 seconds with updated data. This is fine. I want to also now have my table searchable/filterable. I know I have to use the computed thing but how do I use it.
Thank you to whoever helps me!
There's various ways to filter, but the most simple version is simply passing in a string to the filter prop on b-table.
This will search all columns for the string you pass in, so if you bind a data property to a input's v-model and the same data property to the filter property on your table, anything you type in the input will filter the table.
You can read more about how filtering works and some of the other methods in the documentation.
new Vue({
el: '#app',
data() {
return {
filter: '',
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" class="p-5">
<b-input v-model="filter" placeholder="Filter table.."></b-input>
<hr />
<b-table :items="items" :fields="fields" :filter="filter">
</b-table>
</div>
Detailed Code for filtering bootstrap-vue please refer documentation Thanks
new Vue({
el: '#app',
data() {
return {
items: [{
isActive: true,
age: 40,
name: {
first: 'Dickerson',
last: 'Macdonald'
}
},
{
isActive: false,
age: 21,
name: {
first: 'Larsen',
last: 'Shaw'
}
},
{
isActive: false,
age: 9,
name: {
first: 'Mini',
last: 'Navarro'
},
_rowVariant: 'success'
},
{
isActive: false,
age: 89,
name: {
first: 'Geneva',
last: 'Wilson'
}
},
{
isActive: true,
age: 38,
name: {
first: 'Jami',
last: 'Carney'
}
},
{
isActive: false,
age: 27,
name: {
first: 'Essie',
last: 'Dunlap'
}
},
{
isActive: true,
age: 40,
name: {
first: 'Thor',
last: 'Macdonald'
}
},
{
isActive: true,
age: 87,
name: {
first: 'Larsen',
last: 'Shaw'
},
_cellVariants: {
age: 'danger',
isActive: 'warning'
}
},
{
isActive: false,
age: 26,
name: {
first: 'Mitzi',
last: 'Navarro'
}
},
{
isActive: false,
age: 22,
name: {
first: 'Genevieve',
last: 'Wilson'
}
},
{
isActive: true,
age: 38,
name: {
first: 'John',
last: 'Carney'
}
},
{
isActive: false,
age: 29,
name: {
first: 'Dick',
last: 'Dunlap'
}
}
],
fields: [{
key: 'name',
label: 'Person full name',
sortable: true,
sortDirection: 'desc'
},
{
key: 'age',
label: 'Person age',
sortable: true,
class: 'text-center'
},
{
key: 'isActive',
label: 'Is Active',
formatter: (value, key, item) => {
return value ? 'Yes' : 'No'
},
sortable: true,
sortByFormatted: true,
filterByFormatted: true
},
{
key: 'actions',
label: 'Actions'
}
],
totalRows: 1,
currentPage: 1,
perPage: 5,
pageOptions: [5, 10, 15, {
value: 100,
text: "Show a lot"
}],
sortBy: '',
sortDesc: false,
sortDirection: 'asc',
filter: null,
filterOn: [],
infoModal: {
id: 'info-modal',
title: '',
content: ''
}
}
},
computed: {
sortOptions() {
// Create an options list from our fields
return this.fields
.filter(f => f.sortable)
.map(f => {
return {
text: f.label,
value: f.key
}
})
}
},
mounted() {
// Set the initial number of items
this.totalRows = this.items.length
},
methods: {
info(item, index, button) {
this.infoModal.title = `Row index: ${index}`
this.infoModal.content = JSON.stringify(item, null, 2)
this.$root.$emit('bv::show::modal', this.infoModal.id, button)
},
resetInfoModal() {
this.infoModal.title = ''
this.infoModal.content = ''
},
onFiltered(filteredItems) {
// Trigger pagination to update the number of buttons/pages due to filtering
this.totalRows = filteredItems.length
this.currentPage = 1
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" class="p-5">
<template>
<b-container fluid>
<!-- User Interface controls -->
<b-row>
<b-col lg="6" class="my-1">
<b-form-group
label="Sort"
label-for="sort-by-select"
label-cols-sm="3"
label-align-sm="right"
label-size="sm"
class="mb-0"
v-slot="{ ariaDescribedby }"
>
<b-input-group size="sm">
<b-form-select
id="sort-by-select"
v-model="sortBy"
:options="sortOptions"
:aria-describedby="ariaDescribedby"
class="w-75"
>
<template #first>
<option value="">-- none --</option>
</template>
</b-form-select>
<b-form-select v-model="sortDesc" :disabled="!sortBy" :aria-describedby="ariaDescribedby" size="sm" class="w-25">
<option :value="false">Asc</option>
<option :value="true">Desc</option>
</b-form-select>
</b-input-group>
</b-form-group>
</b-col>
<b-col lg="6" class="my-1">
<b-form-group label="Initial sort" label-for="initial-sort-select" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0">
<b-form-select id="initial-sort-select" v-model="sortDirection" :options="['asc', 'desc', 'last']" size="sm"></b-form-select>
</b-form-group>
</b-col>
<b-col lg="6" class="my-1">
<b-form-group label="Filter" label-for="filter-input" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0">
<b-input-group size="sm">
<b-form-input id="filter-input" v-model="filter" type="search" placeholder="Type to Search"></b-form-input>
<b-input-group-append>
<b-button :disabled="!filter" #click="filter = ''">Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
</b-col>
<b-col lg="6" class="my-1">
<b-form-group v-model="sortDirection" label="Filter On" description="Leave all unchecked to filter on all data" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group v-model="filterOn" :aria-describedby="ariaDescribedby" class="mt-1">
<b-form-checkbox value="name">Name</b-form-checkbox>
<b-form-checkbox value="age">Age</b-form-checkbox>
<b-form-checkbox value="isActive">Active</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
</b-col>
<b-col sm="5" md="6" class="my-1">
<b-form-group label="Per page" label-for="per-page-select" label-cols-sm="6" label-cols-md="4" label-cols-lg="3" label-align-sm="right" label-size="sm" class="mb-0">
<b-form-select id="per-page-select" v-model="perPage" :options="pageOptions" size="sm"></b-form-select>
</b-form-group>
</b-col>
<b-col sm="7" md="6" class="my-1">
<b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" align="fill" size="sm" class="my-0"></b-pagination>
</b-col>
</b-row>
<!-- Main table element -->
<b-table :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filter" :filter-included-fields="filterOn" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" stacked="md" show-empty small
#filtered="onFiltered">
<template #cell(name)="row">
{{ row.value.first }} {{ row.value.last }}
</template>
<template #cell(actions)="row">
<b-button size="sm" #click="info(row.item, row.index, $event.target)" class="mr-1">
Info modal
</b-button>
<b-button size="sm" #click="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
</template>
<template #row-details="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
</ul>
</b-card>
</template>
</b-table>
<!-- Info modal -->
<b-modal :id="infoModal.id" :title="infoModal.title" ok-only #hide="resetInfoModal">
<pre>{{ infoModal.content }}</pre>
</b-modal>
</b-container>
</template>
</div>
Is this what you are looking for?
new Vue({
el: "#app",
data: {
Items: [
{Name: 'Lorem ipsum'},
{Name: 'consectetur'},
{Name: 'adipisicing.'}
],
search: ''
},
computed: {
filteredItems() {
return this.Items.filter(item => item.Name.toLowerCase().includes(this.search.toLowerCase()))
}
}
})
.item {
border: solid black 2px;
padding: 10px;
margin: 10px;
}
.search {
border: solid black 2px;
padding: 10px;
margin: 10px;
}
p {
padding: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<p>Found {{filteredItems.length}} items</p>
<input class="search" type="text" placeholder="Search" v-model="search">
<div class="item" v-for="item in filteredItems">{{item.Name}}</div>
</div>