How to break a v-for loop in vuejs - javascript

I have a code segment that i have mentioned below. I have used vuejs with vuetifyjs.
<v-data-table v-bind:headers="headers" v-bind:items="uniqueSubjects">
<template slot="items" slot-scope="props">
<td class="text-xs-center">{{ props.index+1 }}</td>
<td class="text-xs-center">{{ month[new Date(props.item.daily_date).getMonth()] }},{{ props.item.student_id }}</td>
<td class="text-xs-center">{{ props.item.subjects.subject_name }}{{ props.item.subjects.id }}</td>
<template v-for="n in 31">
<template v-for="(mark,index) in resultsList">
<template v-if="new Date(mark.daily_date).getDate() == n && mark.subject_id == props.item.subject_id && mark.student_id == props.item.student_id">
<td class="text-xs-center">
{{ mark.daily_marks }}
</td>
</template>
<template v-else-if="index>=resultsList.length-1">
<td class="text-xs-center">-</td>
</template>
</template>
</template>
</template>
<template slot="pageText" slot-scope="{ pageStart, pageStop }">
From {{ pageStart }} to {{ pageStop }}
</template>
</v-data-table>
I want to break my <template v-for="(mark,index) in resultsList"> loop when the internal v-if condition is true.
Here i want to search the inner loop from first to last.I want to break the loop if the data is matched depending on the given condition.and then i want to do it again and again.
How can I do that? Any help would be appreciated.
Thanks in advance.

There is no way to break v-for. It is better to create a computed property in your component and filter your data there to pass only needed data to v-for.
For example:
// ... your component code
computed: {
validResultsList() {
return this.resultsList/* ... your filtering logic ... */;
}
}
// ... your component code
And then in your template:
<template v-for="(mark,index) in validResultsList">

Related

Vue v-select problem with v-slot not showing text

I'm trying to display custom text in v-select options by slots.
Template:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template slot="item" slot-scope="data">
<span>{{data.description}}</span>
</template>
</v-select>
Script:
data () {
return {
dLevelSelected: null,
dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}]
}
}
With this, when you open the v-select the two registers of dLevels are appearing as boxes but with any text. It seems like the data.description is being evaluated like data.undefined
Thanks!
slot and slot-scope are deprecated as of Vue 2.6.0.
The new slot syntax combines those two props into v-slot, so the equivalent item slot is:
<template v-slot:item="scope">
<span>{{ scope.item.description }}</span>
</template>
Note the scope contains an item property that can be used to access description. You can use object destructuring to simplify that to:
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
Similarly, you'll probably want a custom selection slot that renders the appearance of the selected item:
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
The final template should look similar to this:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
</v-select>
demo

Dynamically create Vue Component on click

I have a list of orders which I am populating via the orders array. Each of these orders have a functionality where the user can edit these orders. I am trying to generate a vuetify dialog box component when the user clicks on the edit button which will have the default data from that order which the user can choose to edit. So far I have tried this,
<tbody class="items">
<tr v-for="order in orders" :key="order.name">
<td>{{ order.fullname }}</td>
<td>{{ order.address }}</td>
<td>{{ order.phone }}</td>
<!-- <td>{{ order.orderQuantity }}</td> -->
<td>{{ order.quantity }}</td>
<td v-if="order.status == true">
<v-chip small outlined class="ma-2 chip" color="green">delivered</v-chip>
</td>
<td v-if="order.status == false">
<v-chip small outlined class="ma-2 chip" color="red">in progress</v-chip>
</td>
<td>
<!-- <component v-bind:is="component"></component> -->
<!-- <EditOrder></EditOrder> -->
<v-dialog v-model="dialog" persistent max-width="290">
<template #activator="{ on, attrs }">
<v-btn icon color="primary" dark v-bind="attrs" v-on="on"> Open Dialog </v-btn>
</template>
<v-card>
<v-card-title class="headline"> Use Google's location service? </v-card-title>
<v-card-text>{{ phone }}</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog = false"> Disagree </v-btn>
<v-btn color="green darken-1" text #click="dialog = false"> Agree </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
</tr>
</tbody>
but this generates n instances of the dialog box before the actual components loads. I also tried using async components but couldn't figure out where I was wrong.
This is what I think should happen;
When the user clicks on the "edit order" button, a dialog box component with the default order details for that particular order must be automatically generated and destroyed.
Please correct me if I am wrong.
Move the dialog part to a separate component
In the parent component, use it once at the beginning with dialog=false to be hidden initially
Add a data attribute orderToEdit which will be a prop to the child component
For each order in the list, add an edit button that would call a method when clicked passing the order
In this method, set orderToEdit to the passed order of the clicked item and set dialog=true to show it with the custom values
const dialogmodel = Vue.component('btn', {
template: '#dialogmodel',
props: { order: Object, value: Boolean },
computed: {
dialog: {
get () { return this.value; },
set (value) { this.$emit('close', value); }
}
}
});
new Vue({
el:"#app",
vuetify: new Vuetify(),
components: { dialogmodel },
data: () => ({
orders: [
{ name:"1", fullname:"fullname1", address:"address1", phone:"phone1", quantity:"quantity1", status:false },
{ name:"2", fullname:"fullname2", address:"address2", phone:"phone2", quantity:"quantity2", status:true }
],
dialog:false,
orderToEdit: {}
}),
methods: {
closeDialog(value) { this.dialog = value; },
editOrder(order) { this.orderToEdit = order; this.dialog = true; }
}
});
<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><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#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<template id="dialogmodel">
<div>
<v-dialog v-model="dialog" max-width="290" persistent>
<v-card>
<v-card-title class="headline">
{{ order.fullname }}
</v-card-title>
<v-card-text> {{ order.address }} </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="$emit('close')">
Disagree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<v-app id="app">
<div>
<dialogmodel v-model="dialog" :order="orderToEdit" #close="closeDialog" />
</div>
<div>
<table>
<tbody class="items">
<tr v-for="order in orders" :key="order.name">
<td>{{ order.fullname }}</td>
<td>{{ order.address }}</td>
<td>{{ order.phone }}</td>
<td>{{ order.quantity }}</td>
<td v-if="order.status == true">
<v-chip small outlined class="ma-2 chip" color="green">delivered</v-chip>
</td>
<td v-if="order.status == false">
<v-chip small outlined class="ma-2 chip" color="red">in progress</v-chip>
</td>
<td>
<v-btn #click="editOrder(order)">Edit</v-btn>
</td>
</tr>
</tbody>
</table>
</div>
</v-app>
Are you looking to have a central popup being filled with the data of the order you selected to edit? In that case you can simply have a single component for the edit popup (instead of adding them to your v-for).
You can do it like this:
When clicking on 'edit', set a data property 'orderIndexToEdit' to the index of the order in the v-for
have a single dialog box that becomes visible when 'orderIndexToEdit' is truethy using v-if or v-show
Create a computed property that returns the correct order from the orders array, based on the index stored in the 'orderIndexToEdit' variable.
Use that computed property to populate the dialog box.
Let me know whether this helps!

Create new row for every 3 items Vue.js

Basically the code works fine but I am not able to change the order of the elements. At the moment the result looks like this:
But actually I would like it like this:
My code Looks like this:
<template>
<div class="home">
<el-container>
<el-row v-for="story of chunkedItems" :key="story.id">
<el-col v-for="item of story" :key="item.id">
<el-card>
<div>{{ item.title }}</div>
<div>{{ item.text }}</div>
</el-card>
</el-col>
</el-row>
</el-container>
</div>
</template>
computed: {
chunkedItems() {
return this.$_.chunk(this.stories, 3);
},
},
Any suggestion is appreciated.
Remove the chunk and use :span="8" instead.
<template>
<div class="home">
<el-container>
<el-row>
<el-col :span="8" v-for="item of stories" :key="item.id">
<el-card>
<div>{{ item.title }}</div>
<div>{{ item.text }}</div>
</el-card>
</el-col>
</el-row>
</el-container>
</div>
</template>
computed: {
},

Get row index for Antdv table

All I need to do is to get and pass the row index once I click on a button place in a cell of the a-table, I cannot find the solution for it:
<a-table
:columns="columns"
:data-source="getRowsData"
:pagination="false"
row-key="id"
>
<template slot="action" slot-scope="text">
<a-button type="primary" #click="getRowIndex">
{{ text }}
</a-button>
</template>
</a-table>
you can pass the record in the scope, and refer it in click function
<template slot="action" slot-scope="text, record">
<a-button type="primary" #click="() => getRowIndex(record.key)">
{{ text }}
</a-button>
</template>
methods: {
getRowIndex(key) {
//do smthg with the key
},
}

Showing v-menue's selected option in another part of the application. Vuetify

So I have a v-menu with some options. Now I want to display the selected option in another part of my app (same component). I tried to do it using v-model but it doesn't work. What's the best way to do it?
This is the code for the v-menu and where I want to display the selected option:
<v-menu bottom transition="scale-transition" >
<v-btn slot="activator">​
28
</v-btn>
<v-list>
<v-list-tile
v-for="(item, index) in PIFBitems"
:key="index"
v-model="hasan"
#click="boardSwitch('shoPFIB', index)"
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
.
.
.
<p class="chipPam13"
>{{this.hasan}}</p>
.
.
This is the script code:
data() {
return {
hasan:'',
PIFBitems:[
{title: empty},
{title: PIFB}
]
}
}
Please use hasan rather than this.hasan in your HTML:
<p class="chipPam13">{{hasan}}</p>
Or if v-model doesn't work, you can try to set hasan value at boardSwitch function:
...
methods: {
boardSwitch (firstArg, secondArg, value) {
...
this.hasan = value
},
...
}
Please don't forget to add third argument to your function call in HTML:
<v-list-tile
v-for="(item, index) in PIFBitems"
:key="index"
v-model="hasan"
#click="boardSwitch('shoPFIB', index, item.title)"
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>

Categories