I have list below and when i delete my items they will not be removed from my list unless i refresh the page.
List
<tbody>
<tr v-for="school in schools" v-bind:key="school.id">
<td>{{ school.id }}</td>
<td>{{ school.name }}</td>
<td>
<button
class="btn btn-danger"
v-on:click="deleteSchool(school.id)">
Delete
</button>
</td>
</tr>
</tbody>
Delete method
deleteSchool(id)
{
let uri = `http://localhost/schools/${id}`;
this.axios.delete(uri);
this.schools.splice(id, 1);
}
Any idea?
use index it 's like a key to splice an item from the list
<tbody>
<tr v-for="(school,index) in schools" v-bind:key="school.id">
<td>{{ school.id }}</td>
<td>{{ school.name }}</td>
<td>
<button
class="btn btn-danger"
v-on:click="deleteSchool(school.id,index)">
Delete
</button>
</td>
</tr>
</tbody>
deleteSchool(id,index)
{
let uri = `http://localhost/schools/${id}`;
this.axios.delete(uri);
this.schools.splice(index, 1);
}
Using ES6, it could also be done like this, with findIndex().
<tbody>
<tr v-for="school in schools" :key="school.id">
<td>{{ school.id }}</td>
<td>{{ school.name }}</td>
<td>
<button
class="btn btn-danger"
#click="deleteSchool(school.id)">
Delete
</button>
</td>
</tr>
</tbody>
methods: {
deleteSchool(id) {
const uri = `http://localhost/schools/${id}`;
this.axios.delete(uri);
const schoolIndex = this.schools.findIndex(school => school.id === id);
this.schools.splice(schoolIndex, 1);
}
}
Related
Dobry den, everybody!
I have a daynamic table, created with vue.js
<tbody>
<tr v-for="(row, index) in tableData">
<td>{{ (index + 1) }}</td>
<td>{{ row.link }}</td>
<td>{{ row.location}}</td>
<td class="small center">{{ row.useful }}</td>
<td class="small center">{{ row.useless }}</td>
<td class="small center">{{ row.neverResponded }}</td>
</tr>
</tbody>
Now I want to make a link clickable but don`t know how to do it. Here is what I tried:
<tbody>
<tr v-for="(row, index) in tableData">
<td>{{ (index + 1) }}</td>
<td>{{ row.link }}</td>
<td>{{ row.location}}</td>
<td class="small center">{{ row.useful }}</td>
<td class="small center">{{ row.useless }}</td>
<td class="small center">{{ row.neverResponded }}</td>
</tr>
</tbody>
But value is not passed because of quotes (obviously). Is there any way to pass this variable to href? Thank you!
You can bind your link:
<td><a :href="row.link">{{ row.link }}</a></td>
I want to use a click event in my table to go to the detailpage of the clicked row with the exception on the first and last td element.
Example:
<tr v-for="(row, key) in $rows" :key="row.id">
<td>*Input checkbox*</td>
<td>{{ row.user.type }}</td>
<td>{{ date | moment('MMMM') }}</td>
<td>{{ row.customer.name }}</td>
<td>{{ row.user.name }}</td>
<td>{{ row.total }}</td>
<td>*Icon to archive*</td>
</tr>
What I can't use because of exception on first and last element:
<tr #click="detailPage(row.user.id)" v-for="(row, key) in $rows" :key="row.id">
What I don't want to use because of repeating code:
<tr v-for="(row, key) in $rows" :key="row.id">
<td>*Input checkbox*</td>
<td #click="detailPage(row.user.id)">{{ row.user.type }}</td>
<td #click="detailPage(row.user.id)">{{ date | moment('MMMM') }}</td>
<td #click="detailPage(row.user.id)">{{ row.customer.name }}</td>
<td #click="detailPage(row.user.id)">{{ row.user.name }}</td>
<td #click="detailPage(row.user.id)">{{ row.total }}</td>
<td>*Icon to archive*</td>
</tr>
What I tried but didn't trigger the click event:
<tr v-for="(row, key) in $rows" :key="row.id">
<td>*Input checkbox*</td>
<template #click="detailPage(row.user.id)">
<td>{{ row.user.type }}</td>
<td>{{ date | moment('MMMM') }}</td>
<td>{{ row.customer.name }}</td>
<td>{{ row.user.name }}</td>
<td>{{ row.total }}</td>
<td>*Icon to archive*</td>
</template>
</tr>
How I could solve with JQuery:
$('table#tbl > tbody > tr > td').not(':first').not(':last').click(function() {
// detailpage
})
Method from click event
methods: {
detailPage (id) {
this.$router.push({path: `/timesheets/view/${id}`})
},
Is there a right way in Vue without repeating code?
You can add this event modifier on the td element you don't want to trigger with the click :
v-on:click.stop=""
or just :
#click.stop
and leave the #click on the tr element.
You can check the documentation for more informations :
https://v2.vuejs.org/v2/guide/events.html
new Vue({
el: '#app',
data: {
message: 1
},
methods:{
add(){
this.message++;
}
}
})
td {
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr #click="add()">
<td>Hello</td>
<td v-on:click.stop="">Visitor n° {{message}}</td>
</tr>
</table>
</div>
I have a table that fills with data from json. So how i can append a new after cllicked element ?
<tbody>
<tr v-for="f in firm" class="main" >
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
This code creata for me my table with data And now i want to click one element and after this element append new tr. I try create methods but every my idea wail
If you change the data that your HTML is rendering, the HTML will update automatically. Since the code renders a <tr> for each item in the firm array, add an item to the firm array to make a new <tr>. See the demo below.
new Vue({
el: '#app',
data: {
firm: []
},
methods: {
addRow() {
this.firm.push({
name: 'new row',
open: 'open',
max: 'max',
min: 'min',
close: 'close',
change: 'change',
trans: 'trans',
vol: 'vol',
})
}
}
})
<div id="app">
<button #click="addRow">Add new row</button>
<table>
<tbody>
<tr v-for="f in firm" class="main">
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/vue"></script>
I am displaying a table of customers generated dynamically using v-for. Each row has a button that adds the customer ID in an object that will be sent to the API. The thing is, I want to add the Bootstrap .success class to the clicked row, so the user knows that the customer has been selected, but I can only achieve that all the rows in the table get the .success class. Also, I would like that when the user clicks another customer, the selected customer loses the .success class.
Here's my code:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>
export default {
data(){
return {
customers: [],
selectedCustomer: ''
}
},
methods: {
selectCustomer(id, clicked){
this.selectedCustomer = id;
console.log(this.selectedCustomer);
}
}
Thank you!
Binding success class to the row based on selectedCustomer value should help you achieve what you're looking for. Something like this, untested:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers" v-bind:class="{'success': (customer.id == selectedCustomer)}">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>
I have a button where I am passing the value back to the controller:
<button type="button" ng-model="activeCustomer" value="active" ng-click="getVal($event)" ng-class="{'active':activeCustomer === 'active'}" class="btn btn-default">Active</button>
Its being stored in the controller like this:
$scope.activeCustomer='active';
$scope.getVal=function(active){
$scope.activeCustomer=active.currentTarget.value;
}
I want to filter my list by $scope.activeCustomer if detail.activeCustomer = $scope.activeCustomer
<tr ng-repeat="detail in theRecords | orderBy:sortType:sortReverse | filter:searchCustomer" ng-click="expandCustomer(detail.theCustId)" class="drillable">
<td>{{ detail.fullname }}</td>
<td>{{ detail.email }}</td>
<td>{{ detail.phone }}</td>
<td>
<p ng-bind="{{ detail.firstcontact }} | date:'dd/MM/yy'"></p>
</td>
<td>{{ detail.theMainAddress }}</td>
<td>{{ detail.paymentType }}</td>
<td>{{ detail.theStatus }}</td>
<td>{{ detail.activeCustomer }}</td>
</tr>
any ideas?
Thanks
You're very close with what you have.
You're already setting the activeCustomer in your controller. Just pass that to the filter.
<tr ng-repeat="detail in theRecords |
orderBy:sortType:sortReverse | filter:activeCustomer">