Here I am trying to achieve a pagination in vue.js. To achieve that I have written vue.js script and also template. So here pagination is not working in my case I have tried alot but unable to understand where I am going wrong. I have implemented this in JavaScript and it was working fine but I am trying to implement in vue. So if anyone can have an ide please help me
<body translate="no" >
<div id="app" class="col-sm-12">
<div class="offset">
<table class="table table-bordered">
<thead>
<tr class="msglist_header">
<th>Member</th>
<th>Product</th>
<th>Message</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="inbox-1">
{% if displayedPosts%}
{% for i in displayedPosts%}
<tr class="content_set">
<div>
<a class="fix">{{i.username|first|upper}}
<span>{{i.username|last|upper}}</span></a>
</div>
</td>
<td>
<a>
<div class="show-form-msgrply a">
{{i.ttle}}
</div>
</a>
</td>
<td>
<a>
<div id="classi_msg">{{i.message}}</div>
</a>
</td>
<td>
<div class="f">
{% for key,value in some_date.items %}
{% if i.id == key %}
<a>{{ value }}</a>
{% endif %}
{% endfor %}
</div>
</td>
<td>
<button class="show-form-msg-delete">
<a>
<span class="fa fa-trash"></span>
</a>
</button>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<button type="button" class="page-link" v-if="page != 1" #click="page--"> Previous </button>
</li>
<li class="page-item">
<button type="button" class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" #click="page = pageNumber"> {{pageNumber}} </button>
</li>
<li class="page-item">
<button type="button" #click="page++" v-if="page < pages.length" class="page-link"> Next </button>
</li>
</ul>
</nav>
</div>
</div>
new Vue({
el: "#app",
data() {
return {
posts: [''],
page: 1,
perPage: 4,
pages: [] };
},
methods: {
getPosts() {
let data = [];
for (let i = 0; i < 50; i++) {if (window.CP.shouldStopExecution(0)) break;
this.posts.push(data);
}window.CP.exitedLoop(0);
},
setPages() {
let numberOfPages = Math.ceil(this.posts.length / this.perPage);
for (let index = 1; index <= numberOfPages; index++) {if (window.CP.shouldStopExecution(1)) break;
this.pages.push(index);
}window.CP.exitedLoop(1);
},
paginate(posts) {
let page = this.page;
let perPage = this.perPage;
let from = page * perPage - perPage;
let to = page * perPage;
return posts.slice(from, to);
} },
computed: {
displayedPosts() {
return this.paginate(this.posts);
} },
watch: {
posts() {
this.setPages();
} },
created() {
this.getPosts();
},
filters: {
trimWords(value) {
return value.split(" ").splice(0, 20).join(" ") + '...';
} } });
You need to replace all your {% %} code (what language is that used?) with Vue attributes, etc. For example
<tbody id="inbox-1">
{% if displayedPosts%}
{% for i in displayedPosts%}
<tr class="content_set">
should be rewritten as
<tbody id="inbox-1" v-if="displayPosts">
<tr class="content_set" v-for="i in displayedPosts" :key="i.id">
Related
I cannot see what i have done wrong, i am trying to add my products to my cart but i am not having any luck. How do i add to cart? i can figure out the delete and clear from understanding how to add to cart. i have read through some documentation and managed to get this far but now i am stuck.
i am not sure if i am targeting wrong or i have named something wrong. I used a normal array and it worked alright but i am trying to do it with an api now, does this change the methods?
<section>
<div class ="container" >
<div id="app" >
<div class="row">
<div class="col-md-12" >
<div class="card">
<div class="card-body">
<!-- Cart -->
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr v-for="(product, index) in cart">
<td>{{ item.productName }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.price * item.quantity }} Coins</td>
</tr>
</table>
</div>
</div>
<!-- Shop -->
<div class="row">
<div class="col-md-3" v-for="product in products" :key="product.id" >
<div class="card" >
<div class="card-body">
<div class="product">
<img :src="product.productImage" alt="Product Img">
<h4 class="text-info">{{ product.productName }}</h4>
<h4 class="text-muted">{{ product.price }} Coins</h4>
<p class="text-muted">{{ product.productDescription }}</p>
<input type="number" name="quantity" class="form-control" value="1">
<input type="hidden" name="productName" value="{{productID}}">
<input type="hidden" name="price" value="{{productID.price}}">
<input type="submit" name="add_to_cart" #click="addToCart" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" value="Add to Cart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
var app = new Vue({
el: '#app',
data: {
products: '',
cart: []
},
methods: {
getproducts: function () {
axios.get('http://localhost:8888/DevsDev2022/productAPI/products')
.then(function (response) {
app.products = response.data;
})
.catch(function (error) {
console.log(error);
});
},
addToCart: function (product) {
var cartItem = this.cart.find(item => item.productName === product.productName);
if (cartItem) {
cartItem.quantity++;
} else {
this.cart.push({
productName: product.productName,
price: product.price,
quantity: 1
});
}
},
removeFromCart: function (product) {
var cartItem = this.cart.find(item => item.productName === product.productName);
if (cartItem.quantity > 1) {
cartItem.quantity--;
} else {
this.cart.splice(this.cart.indexOf(cartItem), 1);
}
},
clearCart: function () {
this.cart = [];
}
},
mounted: function () {
this.getproducts();
}
});
</script>
You are missing your template tag around your template
Please take a look at following snippet:
new Vue({
el: '#app',
data() {
return {
products: [{id: 1, productName: 'aaa', price: 25, productDescription: 'rrrrrrr'}, {id: 2, productName: 'bbb', price: 35, productDescription: 'eeeee'}],
cart: []
}
},
methods: {
getproducts() {
/*axios.get('http://localhost:8888/DevsDev2022/productAPI/products')
.then(function (response) {
app.products = response.data;
})
.catch(function (error) {
console.log(error);
});*/
},
addToCart(product) {
var cartItem = this.cart.find(item => item.productName === product.productName);
if (cartItem) {
cartItem.quantity++;
} else {
this.cart.push({
productName: product.productName,
price: product.price,
quantity: 1
});
}
},
removeFromCart(product) {
var cartItem = this.cart.find(item => item.productName === product.productName);
if (cartItem.quantity > 1) {
cartItem.quantity--;
} else {
this.cart.splice(this.cart.indexOf(cartItem), 1);
}
},
clearCart() {
this.cart = [];
}
},
mounted: function () {
this.getproducts();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section>
<div class ="container" >
<div class="row">
<div class="col-md-12" >
<div class="card">
<div class="card-body">
<!-- Cart -->
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr v-for="(product, index) in cart">
<td>{{ product.productName }}</td>
<td>{{ product.price }}</td>
<td>{{ product.quantity }}</td>
<td>{{ product.price * product.quantity }} Coins</td>
</tr>
</table>
</div>
</div>
<!-- Shop -->
<div class="row">
<div class="col-md-3" v-for="product in products" :key="product.id" >
<div class="card" >
<div class="card-body">
<div class="product">
<img :src="product.productImage" alt="Product Img">
<h4 class="text-info">{{ product.productName }}</h4>
<h4 class="text-muted">{{ product.price }} Coins</h4>
<p class="text-muted">{{ product.productDescription }}</p>
<input type="number" name="quantity" class="form-control" value="1">
<input type="hidden" name="productName" :value="product.name">
<input type="hidden" name="price" :value="product.price">
<input type="submit" name="add_to_cart" #click="addToCart(product)" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" value="Add to Cart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
I have 2 pages, one has a list of products and the other one has a bunch of data for that product. There is also a drop-down in the second page.
The problem I'm having is that I'm struggling to get the drop-down to have the selected product selected.
So for example, if I select product 1 from the first page then on the second page the drop-down will show product 1 and if I select product 2 then the drop-down will show product 2.
Here is my code for productIndex.vue
<template>
<div>
<div class="content-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Product Index</h3>
</div>
<div class="card-body p-0">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th style="width: 180px;"></th>
</tr>
</thead>
<tbody>
<tr v-for="product in products">
<td>{{ product.id }}</td>
<td>{{product.name}}</td>
<td class="text-right">
<a #click="goToProductData(product.id)" class="btn btn-xs btn-primary">
Data
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['products'],
data() {
return {
}
},
methods: {
goToProductData(product_id){
localStorage.setItem('product', product_id);
window.location = `/product-data`;
}
},
}
</script>
and here is my productData.vue
<template>
<div>
<div class="content-header">
<div class="container">
<div class="card">
<div class="card-body">
<div class="row mb-2">
<div class="col-sm-6">
<label for="product_id_select">Product</label>
<select id="product_id_select" class="form-control select2" style="width: 100%;">
<optgroup v-for="product in selectProducts" :label="customer.text">
<option v-for="p in product.children" :value="p.id">{{ p.text }}</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['products'],
data() {
return {
}
},
computed: {
selectProducts() {
let select2Options = [];
Object.keys(this.products).forEach(product => {
let productOptions = [];
this.products[product].forEach(p => {
productOptions.push({ id: p.id, text: p.name });
});
select2Options.push({
text: product,
children: productOptions
});
});
return select2Options;
}
}
}
</script>
You forgot to add the v-model to the select in the second page. You can find some example here.
Your code should be something like:
<select id="product_id_select" v-model="selectedProductId" class="form-control select2" style="width: 100%;">
where selectedProductId is a value in your data (or a computed property) that contains the value inserted into the local storage in the first page
How to make only one element activate vue js?
I have 3 drop-down lists, 3 are activated at once, how do I make sure that only one is activated?
As far as I understand, this needs to be done through a loop, but this framework is not given to me
<tr class="inputs-table">
<td>Type object: </td>
<td>
<div class="select">
<div class="select-header form-control" v-on:click="AddForm">
<span class="select__current">Please select one option</span>
<span class="select__off">х</span>
</div>
<addForm v-if="addedForm" />
</div>
</td>
</tr>
<tr class="inputs-table">
<td>Type business-model: </td>
<td>
<div class="select">
<div class="select-header form-control" v-on:click="AddForm">
<span class="select__current">Please select one option</span>
<span class="select__off">х</span>
</div>
<addForm v-if="addedForm"/>
</div>
</td>
</tr>
import addForm from './modal/addForm.vue';
export default {
name: 'Index',
data() {
return {
addedForm: false
}
},
methods: {
AddForm(){
this.addedForm = true;
},
closeForm() {
this.$parent.addedForm = false;
}
},
components: {
addForm,
}
}
with your question and the given screenshot on the comment section, it seems you implement dropdown list in your addForm component and when you click on <div class="select-header form-control" v-on:click="AddForm"> in "type object" or "Type business-model" component will expand the addForm component and your problem is when you click on one header both addForm components are visible.
In that case, there may be several methods to fix this. One easy way to add numbering to each component and only activate the addForm if number equals.
<tr class="inputs-table">
<td>Type object: </td>
<td>
<div class="select">
<div class="select-header form-control" v-on:click="AddForm(1)">
<span class="select__current">Please select one option</span>
<span class="select__off">х</span>
</div>
<addForm v-if="addedForm === 1" />
</div>
</td>
</tr>
<tr class="inputs-table">
<td>Type business-model: </td>
<td>
<div class="select">
<div class="select-header form-control" v-on:click="AddForm(2)">
<span class="select__current">Please select one option</span>
<span class="select__off">х</span>
</div>
<addForm v-if="addedForm === 2"/>
</div>
</td>
</tr>
import addForm from './modal/addForm.vue';
export default {
name: 'Index',
data() {
return {
addedForm: 0
}
},
methods: {
AddForm(number){
this.addedForm = number;
},
closeForm() {
this.$parent.addedForm = false;
}
},
components: {
addForm,
}
}
Since you are using 3 form element this would be enough but if you are planning to use a dynamic number of components it would be great if you use for a method such as create list for each type object
items: [{id:1, title: 'Type Object'}, {id:2, title: 'Business Model'}]
Then use v-for in your tr component such as,
<tr class="inputs-table" v-for="item in items" key="item.id">
<td>{{item.title}}: </td>
<td>
<div class="select">
<div class="select-header form-control" v-on:click="AddForm(item.id)">
<span class="select__current">Please select one option</span>
<span class="select__off">х</span>
</div>
<addForm v-if="addedForm === item.id"/>
</div>
</td>
</tr>
I have a table where each row has a button 'show details'. I have another div stacked within the table, so on clicking the button I want the table to be displayed in the particular column. But I am not able to point which button is clicked from which row to show and hide the div on the clicked row. Here is my code:
<table class="table nowrap scroll-horizontal-vertical">
<thead>
<tr>
<th>SN</th>
<th>Ward no</th>
<th>Personal details</th>
<th>Social security</th>
</tr>
</thead>
<tbody>
<tr v-for="(pop,index) in population" :key="pop.ward_no">
<td>{{index+1}}</td>
<td>{{ pop.ward_no }}</td>
<td>{{ pop.birth }}</td>
<td>
<a href="#" #click="show(index)" class="btn btn-primary">
Show Details
</a>
//show or hide div below on clicking show details button
<div v-show="showDetails">
<h4>Citizen </h4>
<div class="row">
<div class="col-3">{{pop.female}}</div>
<div class="col-2"> {{ pop.male }}</div>
<div class="col-2"> {{ pop.other }}</div>
</div> <br>
</div>
</td>
<td>
<a href="#" class="btn btn-primary" #click="editModal(pop)">
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn btn-primary" #click="deletePopulation(pop.ward_no)">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
This is my vue code:
export default {
data(){
return{
editMode: false,
showDetails: false,
population:{}
})
}
},
methods: {
show(index){
this.showDetails = true;
},
Your showDetails is global and if you click one, you click, vue will show all elements. Your code must be like this code.
new Vue({
el: '.table',
data: {
populations: [
{ showDetails: false, job: 'A' },
{ showDetails: false, job: 'B' },
{ showDetails: false, job: 'C' }
]
}
});
<script src="https://unpkg.com/vue#2.5.2/dist/vue.min.js"></script>
<table class="table">
<tbody>
<tr v-for="(pop, index) in populations">
<td><p v-show='pop.showDetails' class="Detail">My Details</p></td>
<td><a #click="pop.showDetails = false">hide Details</a></td>
<td><a #click="pop.showDetails = true">show Details</a></td>
</tr>
</tbody>
</table>
This is the code that I have written with laravel5, basically I'm trying to display various tables separately based on the option from the dropdown chosen, the datatable works for the first table result however does not work for the rest, correct me if I'm wrong but apprently it has something to do with the data from the first call; if the second datatable uses the same function it will see that data has already been fetched and not make the ajax call to retrieve its data. and so you will not receive data to your second(nth) datatable. Been trying to solve this for two days, I believe I'm missing something, someone please helpme in providing a solution. Thank you in advance.
#extends('app')
#section('content')
<h1 class="page-header">Reports Archive</h1>
<div class="dropdown">
<a id="drop5" href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Zone Options:
<span class="caret"></span>
</a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<?php $count = 1; ?>
#foreach ($zones as $zone)
<li role="presentation" class="{{ $count == 0 ? 'active' : '' }}">
<a role="menuitem" tabindex="-1" href="#" data-target="#zone{{ $zone->id }}"> {{ $zone->zone_name }}</a></li>
<?php $count++; ?>
#endforeach
</ul>
</div>
<div role="tabpanel">
<!-- hide the below links-->
<ul class="nav nav-tabs" style="display:none;" role="tablist" id="myTab">
<?php $count = 1; ?>
#foreach ($zones as $zone)
<li role="presentation" class="{{ $count == 0 ? 'active' : '' }}">{{ $zone->zone_name }}</li>
<?php $count++; ?>
#endforeach
</ul>
<!-- Tab panes -->
<div class="tab-content">
<?php $count = 1; ?>
#foreach ($zones as $zone)
<div role="tabpanel" class="tab-pane fade in {{ $count == 0 ? 'active' : '' }}" id="zone{{ $zone->id }}">
<div class="col-md-12">
<h2> {{ $zone->zone_name }} </h2>
<table class="table table-responsive table-hover table-bordered" id="bootstrap-table">
<thead>
<tr>
<th style="vertical-align:middle">#</th>
<th>
<div class="dropdown">
<a id="drop5" href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Parameter Name:
<span class="caret"></span>
</a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
#foreach ($zone->parameter as $param)
<li role="presentation">
<a class="btn btn-link" data-collapse-group="filters" data-target="#{{ $param->id }}" data-toggle="collapse">{{ $param->parameter_name }}</a></li>
#endforeach
</ul>
</div>
</th>
<th style="vertical-align:middle">Reading Value</th>
<th style="vertical-align:middle">User</th>
<th style="vertical-align:middle">Status</th>
<th style="vertical-align:middle">Timestamp</th>
</tr>
</thead>
#forelse ($parameters as $param)
<?php $index = 1; ?>
#if ($param->zone_id == $zone->id)
<tbody id="{{ $param->id }}" class="collapse">
#foreach ($readings as $reading)
#if ($param->id == $reading->parameter_id)
<tr>
<td>{{ $index }}</td>
<td>{{ $reading->parameter->parameter_name }} </td>
<td>{{ $reading->reading_value }} </td>
<td>{{ $reading->user->name }} </td>
<td>{{ $reading->parameter->threshold->getStatus($reading->reading_value) }} </td>
<td>{{ $reading->created_at }} </td>
</tr>
<?php $index++; ?>
#endif
#endforeach
#endif
#empty
<tr><td colspan="6"><div class="alert alert-warning" role="alert" style = "margin-top: 10px"> Oops! There are no parameters to display here </div></td></tr>
</tbody>
</div>
#endforelse
</div>
</table>
</div>
</div>
<?php $count++; ?>
#endforeach
</div>
</div>
#stop
#section('scripts')
<!-- Bootstrap Based Data Table Plugin Script-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/jquery.bdt.js" type="text/javascript"></script>
<script>
$(document).ready( function () {
$('#bootstrap-table').bdt();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
$('.dropdown-toggle').dropdown();
</script>
#stop