Vue.JS table data not showing in row - javascript

I can't seem to get the data to record into a new row when typed in, and it has since stopped displaying the dummy data when it did before. I really do not understand what I've done wrong so any expert feedback would be greatly appreciated.
new Vue({
el: '#app',
data: {
items: [
{
'id': 1,
'product': 'Mario Kart',
'cost': 39.99
},
{
'id': 2,
'product': 'Call of Duty',
'cost': 129.99
},
{
'id': 3,
'product': 'PS4',
'cost': 169.99
}
],
new_item: [
{
'id': '',
'product': '',
'cost': ''
}
]
},
// calculate total cost of all items
computed: {
result: function() {
return Object.values(this.items).reduce((t, {
cost
}) => t + cost, 0)
},
},
// add and remove items
methods: {
deleteItem: function(index) {
console.log("Removed", index);
this.items.splice(index, 1);
},
addItem: function() {
console.log("Added");
this.items.push({
'id': '',
'items.product': '',
'items.cost.toFixed(2)': ''
});
}
} // close methods
}); // close new Vue
<section class="section">
<div id="app" class="container">
<table class="table is-striped is-fullwidth">
<tr class="th">
<th>Index</th>
<th>Products</th>
<th>Cost</th>
<th></th>
</tr>
<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
<td class="index"> {{ index+1 }} </td>
<td class="service"> {{ items.product }} </td>
<td class="price"> £{{ items.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
<tr class="add_new_item" v-for="(new_items, index) in new_item" :key="'new_itm'+index">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="new_items.product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="new_items.cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
<tr class="is-selected">
<td>Total</td>
<td></td>
<td>£{{ result.toFixed(2) }}</td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

I corrected several things,
Removing your new_item array it is not needed, you just need to store your input values in your data.
product: '',
cost: '',
lastIndex: 3
lastIndex is initialized to 3 due to you have already 3 items in your data items.
The object to be pushed in the items list and how to get that information.
this.items.push({
'id': this.lastIndex,
'product': this.product,
'cost': parseFloat(this.cost)
});
Here a parseFloat it perform because we get a string for the input. Extra work can be performed to check it is a number, or change the input to allow only numbers.
Removed you for iteration to show the insert new item.
Now it looks:
<tr class="add_new_item">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
and last, Modified how to read the information from the items list
<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
<td class="index"> {{ item.id }} </td>
<td class="service"> {{ item.product }} </td>
<td class="price"> £{{ item.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
new Vue({
el: '#app',
data: {
items: [
{
'id': 1,
'product': 'Mario Kart',
'cost': 39.99
},
{
'id': 2,
'product': 'Call of Duty',
'cost': 129.99
},
{
'id': 3,
'product': 'PS4',
'cost': 169.99
}
],
product: '',
cost: '',
lastIndex: 3
},
// calculate total cost of all items
computed: {
result: function() {
return Object.values(this.items).reduce((t, {cost}) => t + cost, 0);
},
},
// add and remove items
methods: {
deleteItem: function(index) {
console.log("Removed", index);
this.items.splice(index, 1);
},
addItem: function() {
console.log("Added");
this.lastIndex += 1;
this.items.push({
'id': this.lastIndex,
'product': this.product,
'cost': parseFloat(this.cost)
});
this.product = '';
this.cost = '';
}
} // close methods
}); // close new Vue
<section class="section">
<div id="app" class="container">
<table class="table is-striped is-fullwidth">
<tr class="th">
<th>Index</th>
<th>Products</th>
<th>Cost</th>
<th></th>
</tr>
<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
<td class="index"> {{ item.id }} </td>
<td class="service"> {{ item.product }} </td>
<td class="price"> £{{ item.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
<tr class="add_new_item">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
<tr class="is-selected">
<td>Total</td>
<td></td>
<td>£{{ result }}</td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

No need to create a new object for the New items and loop through it. I have modified your code. please refer below
new Vue({
el: '#app',
data: {
items: [
{
'id': 1,
'product': 'Mario Kart',
'cost': 39.99
},
{
'id': 2,
'product': 'Call of Duty',
'cost': 129.99
},
{
'id': 3,
'product': 'PS4',
'cost': 169.99
}
],
currentItemId: 0,
product: '',
cost: ''
},
// calculate total cost of all items
computed: {
result: function() {
return Object.values(this.items).reduce((t, {
cost
}) => t + cost, 0)
},
},
created: function() {
this.currentItemId = this.items.length + 1;
},
// add and remove items
methods: {
deleteItem: function(index) {
console.log("Removed", index);
this.items.splice(index, 1);
},
addItem: function() {
console.log("Added");
this.items.push({
'id': this.currentItemId++,
'product': this.product,
'cost': this.cost
});
this.product = '';
this.cost = '';
}
} // close methods
}); // close new Vue
<section class="section">
<div id="app" class="container">
<table class="table is-striped is-fullwidth">
<tr class="th">
<th>Index</th>
<th>Products</th>
<th>Cost</th>
<th></th>
</tr>
<tr class="items" v-for="(item, index) in items" :key="index">
<td class="index"> {{ index+1 }} </td>
<td class="service"> {{ item.product }} </td>
<td class="price"> £{{ item.cost }} </td>
<td> <button class="button is-small is-danger" #click='deleteItem(index)'>Delete</button> </td>
</tr>
<tr class="add_new_item">
<th> </th>
<th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
<th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
<th> <button class="button is-info is-small" #click='addItem()'>Add To List</button> </th>
</tr>
<tr class="is-selected">
<td>Total</td>
<td></td>
<td>£{{ result }}</td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Related

My addrow button in DataTables is not working

I am trying to create a button that can help me to add a row into a DataTables table and still remain every element in each column.
I don't know why my code didn't work.
var table = null;
var arrData = [];
var arrDataPG = [];
arrData.push({
STT: 1,
id: 1,
product_type: "",
condition: "",
cashback: 0.0,
note: ""
});
$('#addRow').on('click', function () {
console.log(arrData.length);
if (arrData != '') {
var ida = arrData[0].id;
} else {
var ida = 1;
}
for (var i = 0; i < arrData.length; i++) {
if (arrData[i].id > ida) {
ida = arrData[i].id;
}
};
arrData.push({
STT: ida + 1,
id: ida + 1,
product_type: "",
condition: "",
cashback: 0.0,
note: ""
});
if (table != null) {
table.clear();
table.rows.add(arrData).draw();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<table id="example" class="cell-border hover" style="width:100%">
<thead>
<tr>
<th>STT</th>
<th>Loại sản phẩm*</th>
<th>Điều kiện áp dụng</th>
<th>Rebate(%)*</th>
<th>Ghi chú</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="sorting_1" style="width:50px">
1
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="product_type"></textarea>
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="condition"></textarea>
</td>
<td>
<input type="number" id="cashback">
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="note"></textarea>
</td>
<td>
<div class="btn btn-danger remove" id=""><i class="fa-solid fa-ban"></i></div>
</td>
</tr>
</tbody>
</table>
<button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
you need to initialise the DataTable before you can add the data to it - once that's done, you need to tell it about the shape of your data. You're also running into an issue that the data you've got in arrData is overwriting your input fields - so I moved the inputs into the table footer; that seems to make the most sense, TBH.
const arrData = [{
STT: 1,
id: 1,
product_type: "Car",
condition: "Poor",
cashback: 20,
note: "Well knackered"
}]
const table = $('#example').DataTable({
data: arrData,
columns: [{
data: 'STT'
},
{
data: 'product_type'
},
{
data: 'condition'
},
{
data: 'cashback'
},
{
data: 'note'
},
{
data: 'id',
visible: false
}
]
})
$('#addRow').on('click', function() {
let ida = null
if (arrData != '') {
ida = arrData[0].id
} else {
ida = 1
}
for (var i = 0; i < arrData.length; i++) {
if (arrData[i].id > ida) {
ida = arrData[i].id
}
}
arrData.push({
STT: ida + 1,
id: ida + 1,
product_type: $('#product_type').val(),
condition: $('#condition').val(),
cashback: $('#cashback').val(),
note: $('#note').val(),
})
table.clear()
table.rows.add(arrData).draw()
$('#product_type').val('')
$('#condition').val('')
$('#cashback').val('')
$('#note').val('')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js
<table id="example" class="cell-border hover" style="width:100%">
<thead>
<tr>
<th>STT</th>
<th>Loại sản phẩm*</th>
<th>Điều kiện áp dụng</th>
<th>Rebate(%)*</th>
<th>Ghi chú</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td class="sorting_1" style="width:50px">
1
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="product_type"></textarea>
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="condition"></textarea>
</td>
<td>
<input type="number" id="cashback">
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="note"></textarea>
</td>
<td>
<div class="btn btn-danger remove" id=""><i class="fa-solid fa-ban"></i></div>
</td>
</tr>
</tfoot>
</table>
<button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button>
Hopefully, that will get you on the right track. The thing to take the most notice of is your initialisation of the DataTable; once that's there, you should be fine.

How to get total of cart items price and multiply with quantity in Vue.js

I am working on the cart system in Vue.js and want to display the sum of product price by multiplication with product quantity. recently I am working in PHP and get this done by array_sum()....
I have a cartData[] in which I am getting the values from the backend using Axios and in an array, there is a value called product_price. i was trying to achieve this with reduce method but it return NaN Thanks in advance
<table id="cart" class="table table-hover table-condensed cart_table">
<!-- <span class="d-none">{{ index }}</span> -->
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:8%">Quantity</th>
<th style="width:8%">Color-Size</th>
<th style="width:22%" class="text-center">Subtotal</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody v-for="(cart, index) in cartData" :key="cart.id">
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs">
<img
:src="
require(`../assets/product_images/${cart.product_image}`)
"
class="img-responsive"
/>
</div>
<div class="col-lg-10">
<span class="d-none">{{ index }}</span>
<h4 class="nomargin">{{ cart.product_title }}</h4>
</div>
</div>
</td>
<td data-th="Price">${{ cart.cart_price }}</td>
<td data-th="Quantity">
<input
type="number"
class="form-control text-center"
v-bind:value="cart.qty"
/>
</td>
<td data-th="Color-size">
<span> {{ cart.product_color }} - {{ cart.product_size }} </span>
</td>
<td data-th="Subtotal" class="text-center">
{{ cart.cart_price * cart.qty }}
</td>
<td class="actions" data-th="">
<button class="btn btn-info btn-sm">
<i class="fas fa-sync"></i>
</button>
<button class="btn btn-danger btn-sm">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="#" class="btn btn-warning"
><i class="fa fa-angle-left"></i> Continue Shopping</a
>
</td>
<td colspan="2" class="hidden-xs"></td>
<td class="hidden-xs text-center">
//here i want to get the sum
<strong>Total {{ total }}</strong>
</td>
<td>
<a href="#" class="btn btn-success btn-block"
>Checkout <i class="fa fa-angle-right"></i
></a>
</td>
</tr>
</tfoot>
</table>
Vue.js script
import axios from "axios";
export default {
name: "Cart",
data() {
return {
cartData: [],
};
},
created() {
this.getCartItems();
},
computed: {
total() {
return this.cartData.reduce((acc, item) => acc + item.product_price, 0);
}
},
methods: {
getCartItems() {
axios
.get("http://localhost/shopping_store/src/Api/api?action=getcartitems")
.then((res) => {
this.cartData = res.data.cart_Data;
})
.catch((err) => {
console.log(err);
});
},
},
};
data(){
return{
total: 0,
cartData: [{
price: 5,
qty: 5},
{price: 5,
qty: 5
}],
}
},
computed: {
calcSum(){
let total = 0;
this.cartData.forEach((item, i) => {
total += item.price * item.qty;
});
return total;
}
}
Based on your object example here is a simple code to get the sum of product price multiplied by product quantity
var cart_Data =[{"p_id":"44","cart_id":"10","cart_price":"100","product_title":"Slim striped pocket shirt","product_image":"product-4.jpg","product_color":"Blue","product_size":"L","qty":"3"},{"p_id":"45","cart_id":"11","cart_price":"42","product_title":"Contrasting Shrit","product_image":"product-7.jpg","product_color":"White","product_size":"M","qty":"1"}]
function total(cart_Data){
let sum=0
cart_Data.map(x=>{
sum = sum + (x.cart_price * x.qty)
})
return sum
}
console.log(total(cart_Data))

unable to select all check on ngonit using angular

here i am trying to select all check boxes by using ngOnit but it is calling that function and by clicking it is calling the function then it is selecting all
.html code
<div>
<h2>Hello Angular2</h2>
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Size</th>
<th>Diameter</th>
<th class="text-center">
<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let size of sizes ; let i = index">
<td class="text-right">{{i + 1}}</td>
<td class="text-right">{{size.size}}</td>
<td>{{size.diameter}}</td>
<td class="text-center">
<input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>
</td>
</tr>
</tbody>
</table>
</div>
.ts code:
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km' },
{ 'size': '1', 'diameter': '32000 km' }
];
checkAll(ev) {
this.sizes.forEach(x => x.state = ev.target.checked)
}
isAllChecked() {
debugger;
return this.sizes.every(_ => _.state);
}
ngOnInit() {
this.isAllChecked();
}
below is my stack blitz url
https://stackblitz.com/edit/angular-pzvusr
your code is working fine. missing thing is you don't have a key state: true in your defined array. that's why it is not selecting all checkbox.
try this array
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km', 'state': true },
{ 'size': '1', 'diameter': '32000 km', 'state': true }
];
<div>
<h2>Hello Angular2</h2>
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Size</th>
<th>Diameter</th>
<th class="text-center">
<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let size of sizes ; let i = index">
<td class="text-right">{{i + 1}}</td>
<td class="text-right">{{size.size}}</td>
<td>{{size.diameter}}</td>
<td class="text-center">
<input type="checkbox" name={{sizecb + i}} value="{{size.id}}"
(change)="sizes[i].state = !sizes[i].state" [checked]="size.state" [(ngModel)]="size.state"/>
</td>
</tr>
</tbody>
</table>
</div>
and in ts
try this array
sizes: any[] = [
{ 'size': '0', 'diameter': '16000 km', 'state': true },
{ 'size': '1', 'diameter': '32000 km', 'state': true }
];

Sort data in Vue.js without plugin

How Sort data in Vue.js without plugin. I have json data like this
var people = [
{
id: 1,
firstName: "John",
lastName: "Doe",
email: "jdoe#example.com",
dob: "12/12/12"
},
{
id: 2,
firstName: "Jane",
lastName: "Smith",
email: "jsmith#example.com",
dob: "11/11/11"
},
{
id: 3,
firstName: "Brian",
lastName: "Rogers",
email: "brogers#example.com",
dob: "10/10/10"
}
];
How to sort them into desc or asc in table and add icon in the table head which is when user click on table head, the icon will be change dynamically.
For example, when data are highest to lowest the icon will be fa-sort-amount-desc
My table code look like this
<div class="row">
<div class="col-xs-12" v-if="!laravelData || laravelData.total === 0"><em>No data available.</em></div>
<div class="col-xs-12">
<div class="table-scrollable">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th> ID</th>
<th> First Name</th>
<th> Last Name</th>
<th> Email </th>
<th> DOB </th>
</tr>
</thead>
<tbody>
<tr v-for="data in laravelData.data" :key="data.title">
<td> <a :href="data.account_link">#{{ data.id }}</a> </td>
<td> #{{ data.firstName }}</td>
<td> #{{ data.lastName }} </td>
<td class="text-right"> #{{ data.email }} </td>
<td class="text-right"> #{{ data.dob }} </td>
</tr>
<tr v-if="!laravelData || laravelData.total === 0">
<td colspan="13"><em>No data available.</em></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Basically, You need to implement own sorting function to sort the given array of objects, or you can use https://lodash.com/docs/4.17.4#orderBy. By use lodash I created the following simple demo.
var people = [{
id: 10,
firstName: "John",
lastName: "Doe",
email: "jdoe#example.com",
dob: "12/12/12"
}, {
id: 2,
firstName: "Jane",
lastName: "Smith",
email: "jsmith#example.com",
dob: "11/11/11"
}, {
id: 3,
firstName: "Brian",
lastName: "Rogers",
email: "brogers#example.com",
dob: "10/10/10"
}];
new Vue({
el: '#app',
data: {
laravelData: {
data: people,
},
sorting: {
col: '',
type: 'asc'
}
},
methods: {
sort: function(key,type) {
//if( this.sorting.col){
this.sorting.col = key;
this.sorting.type = type
// }
this.laravelData.data = _.orderBy(this.laravelData.data, key, this.sorting.type);
//this.laravelData.data = sortByKey(this.laravelData.data,key)
}
}
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<script src="https://unpkg.com/lodash#4.16.0/lodash.js"></script>
<div id="app">
<div class="row">
<div class="col-xs-12" v-if="!laravelData || laravelData.total === 0"><em>No data available.</em></div>
<div class="col-xs-12">
<div class="table-scrollable">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>
ID
<i #click="sort('id','asc')" class="fa fa-sort-asc " aria-hidden="true"></i>
<i #click="sort('id','desc')" class="fa fa-sort-desc" aria-hidden="true"></i>
</th>
<th> First Name</th>
<th> Last Name</th>
<th> Email </th>
<th> DOB </th>
</tr>
</thead>
<tbody>
<tr v-for="data in laravelData.data" :key="data.title">
<td> <a :href="data.account_link">#{{ data.id }}</a> </td>
<td> #{{ data.firstName }}</td>
<td> #{{ data.lastName }} </td>
<td class="text-right"> #{{ data.email }} </td>
<td class="text-right"> #{{ data.dob }} </td>
</tr>
<tr v-if="!laravelData || laravelData.total === 0">
<td colspan="13"><em>No data available.</em></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
You can find jsfiddle # https://jsfiddle.net/sureshamk/zc9wr53g/2/

VueJS Accordion Table - Appears outside of the table

I have a table where the data is fetched using ajax. I'm trying to have a table where each row has an associated hidden row and clicking on the row toggles the display of the hidden row. The hidden row contains an accordion.
The problem is that the accordion is getting all messed up and shows at the bottom of the table, rather than showing below the particular row that it was clicked on.
My code is as follows:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th v-for="column in columns">
<span v-if="column == 'Predictive Price'">
{{column}}
<i class="fa fa-info-circle" v-tooltip="msg"></i>
</span>
<span v-else-if="column == 'Actual Price'">
{{column}}
<i class="fa fa-info-circle" v-tooltip="tooltip.actual_price"></i>
</span>
<span v-else>
{{column}}
</span>
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="row in model" #click="showRow">
<td>
{{row.id}}
</td>
<td>
{{row.company_customer.customer_name}}
</td>
<td>
<i class="fa fa-map-marker"></i>
<small>
{{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
</small>
</td>
<td>
<i class="fa fa-map-marker"></i>
<small>
{{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
</small>
</td>
<td>
£{{row.predictive_price}}
</td>
<td>
£{{row.actual_price}}
</td>
<td>
n/a
</td>
<tr>
<td colspan="7" v-if="contentVisible">
<div class="accordian-body">
ACCORDION
</div>
</td>
</tr>
</tr>
</tbody>
</table>
<script>
export default {
methods: {
data() {
return {
msg: 'This is just an estimation!',
tooltip: {
actual_price: 'Click on the price to edit it.'
},
contentVisible: false,
}
},
rowRow() {
this.contentVisible = !this.contentVisible;
}
}
}
</script>
Where can I place the accordion div in order for it to display correctly?
EDIT:
Please see fiddle: https://jsfiddle.net/49gptnad/355/
It sounds like you want an accordion associated with every row, so really, you want two rows for each item of your data.
You can accomplish that by moving your v-for to a template tag that wraps both of your rows.
Additionally, you need to control whether content is visible on a row by row basis, so add a contentVisible property to each data item and use it to control whether your second row is visible or not.
console.clear()
var vm = new Vue({
el: '#vue-instance',
data: {
testing: [{
id: 1,
name: "Customer 1",
contentVisible: false
},
{
id: 2,
name: "Customer 1",
contentVisible: false
},
{
id: 3,
name: "Customer 3",
contentVisible: false
},
],
columns: ["id", "name"]
},
mounted() {
console.log(this.testing);
},
methods: {
showRow(data) {
this.contentVisible = !this.contentVisible;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="vue-instance">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th v-for="column in columns">
{{column}}
</th>
</tr>
</thead>
<tbody>
<template v-for="row in testing">
<tr #click="row.contentVisible = !row.contentVisible">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
</tr>
<tr v-if="row.contentVisible">
<td :colspan="columns.length" >
<div class="accordian-body">
afasfafs
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
Here is your updated fiddle.

Categories