Related
This is for select a city and area, It will filter the same data to show it. But I meet with a problem is that when I selected, the value doesn't appear.
I have been try and searched similar code but still doesn't find the solution.
This is the image when of HTML rendering :
Here is template :
<a href="#" class="list-group-item" v-for="(live , idx) of filterLivingNames" :key="idx">
<h3 class="text-center">{{live.Name}}</h3>
<p>Address：</p>
<p>Phone：</p>
</a>
Here is script
import LivingData from '#/assets/LivingData.json';
export default {
computed: {
livedata(){
return LivingData;
},
filterLivingNames(){
let livelength = this.livedata.length
for(let i = 0 ; i < livelength ; i++){
if(this.livedata[i].Region === this.city && this.livedata[i].Town === this.area){
console.log(this.livedata[i])
return this.livedata[i]
}
else{
continue
}
}
}
}
}
Update json file
[
{
"Id": "1",
"Name": "Hotel-1",
"Region": "Region-1",
"Town": "Town-1",
},
{
"Id": "2",
"Name": "Hotel-2",
"Region": "Region-2",
"Town": "Town-2",
},
{
"Id": "3",
"Name": "Hotel-3",
"Region": "Region-2",
"Town": "Town-1",
},
{
"Id": "4",
"Name": "Hotel-4",
"Region": "Region-1",
"Town": "Town-2",
},
]
As you are filtering out the livedata based on Region and Town. You can simply use the Array.filter() method and this will resolve the issue you are facing as it will return the array.
Live Demo :
new Vue({
el: '#app',
data: {
livedata: [
{
"Id": "1",
"Name": "Hotel-1",
"Region": "Region-1",
"Town": "Town-1",
},
{
"Id": "2",
"Name": "Hotel-2",
"Region": "Region-2",
"Town": "Town-2",
},
{
"Id": "3",
"Name": "Hotel-3",
"Region": "Region-2",
"Town": "Town-1",
},
{
"Id": "4",
"Name": "Hotel-4",
"Region": "Region-1",
"Town": "Town-2",
}
],
city: 'Region-1',
area: 'Town-1'
},
computed: {
filterLivingNames() {
return this.livedata.filter(obj => obj.Region === this.city && obj.Town === this.area)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<a href="#" class="list-group-item" v-for="(livingData, index) of filterLivingNames" :key="index">
<h3 class="text-center">{{ livingData.Name }}</h3>
<p>Address：</p>
<p>Phone：</p>
</a>
</div>
I am getting wrong data when I called a incremental method in vue3 in v-for loop.
My code is given below, here I could have used index+100 but I need like this, this is the sample version of my original code. A screenshot is given after the code, see the console log the counter is more then I expected, also index started with 605 but it should 100
<template>
<table border="1" style="border-collapse: collapse">
<thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
<tr :key="index" v-for="(rowitem,index) in table_data.items">
<td>{{getRowIndex()}}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'App',
data() {
return {
start_row_ind: 100,
table_data: {
items: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
]
}
}
},
methods: {
getRowIndex(){
console.log(this.start_row_ind);
return this.start_row_ind++;
}
}
}
</script>
Output screenshot is
Please advice me how can I fix this issue, I have to use this method getRowIndex
Try without method, just add index in template, or you can pass index to your method:
new Vue({
el: "#demo",
data() {
return {
start_row_ind: 100,
table_data: {
items: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
],
},
items2: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
]
}
},
methods: {
getRowIndex(i){
return this.start_row_ind + i;
},
addRows() {
this.table_data.items.push(...this.items2)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table border="1" style="border-collapse: collapse">
<button #click="addRows">add rows</button>
<thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
<tr :key="index" v-for="(rowitem,index) in table_data.items">
<td>{{ getRowIndex(index) }}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
</tr>
</tbody>
</table>
</div>
I want to list the states of the country in 2nd selection (JSON) format when country is selected in 1 selection I want to make with vuejs. I can do this with normal select but I want to do it in "select2" action. I have not seen or encountered an example of it anywhere.
For example, when France is chosen as the country. in the second option i want the states of france to be listed
Please answer considering that you are a beginner when writing an answer.
select2 or vue-select
[
{
"country": "America",
"plate": 1
},
{
"country": "France",
"plate": 2
},
{
"country": "Holland",
"plate": 3
},
{
"country": "China",
"plate": 4
},
{
"country": "state",
"plate": 5
}
]
[
{
"id": 1,
"country": "America",
"state": "Texas"
},
{
"id": 2,
"country": "America",
"state": "NewMexico"
},
{
"id": 3,
"country": "America",
"state": "Montana"
},
{
"id": 4,
"country": "France",
"state": "Normandy"
},
{
"id": 5,
"country": "France",
"state": "Paris"
},
{
"id": 6,
"country": "France",
"state": "Occitanie"
},
{
"id": 7,
"country": "Holland",
"state": "Köln"
},
{
"id": 8,
"country": "Holland",
"state": "Brüksel"
},
{
"id": 9,
"country": "China",
"state": "Gansu"
},
{
"id": 10,
"country": "China",
"state": "Hubei"
},
{
"id": 11,
"country": "China",
"state": "Hainan"
},
{
"id": 12,
"country": "Iraq",
"state": "Erbil"
},
{
"id": 13,
"country": "Iraq",
"state": "Bagdat"
}
]
<template>
<div class="container">
<div class="row">
<div class="col-md-4">
<label class="my-1 mr-2">countries</label>
<select class="custom-select my-1 mr-sm-2 form-control" v-model="selected" #change="getState()">
<option v-if="selected === 'Choose'">Choose</option>
<option v-for="item in countries" v-bind:key="item.id">{{ item.country}}
</option>
</select>
</div>
<div class="col-md-4 ">
<label class="my-1 mr-2">state</label>
<select class="custom-select my-1 mr-sm-2 form-control">
<option v-if="selectedCountry === false">Choose</option>
<option v-for="list in states" v-bind:key="id">{{ list.state}}</option>
</select>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selected: 'Choose',
countries: {},
states: [],
selectedCountry: false,
}
},
created() {
this.getCounty()
},
methods: {
getCounty() {
axios.get('json/country.json')
.then(res => this.countries = res.data)
},
getState() {
this.selectedCountry = true
this.states = []
axios.get('json/states.json')
.then(res => {
res.data.forEach(i => {
if (this.selected === i.country) {
this.states.push(i.state)
}
})
})
}
}
}
</script>
You can prepare data and use vue-multiselect :
Vue.config.productionTip = false
new Vue({
el: '#demo',
components: { Multiselect: window.VueMultiselect.default },
data() {
return {
options: [
{"id": 1,"country": "America", "plate": 1}, {"id": 2,"country": "France","plate": 2},
{"id": 3,"country": "Holland","plate": 3}, {"id": 4,"country": "China","plate": 4},
{"id": 5,"country": "state","plate": 5}
],
states: [
{"id": 1,"country": "America","state": "Texas"},
{"id": 2,"country": "America","state": "NewMexico"},
{"id": 3,"country": "America","state": "Montana"},
{"id": 4,"country": "France","state": "Normandy"},
{"id": 5,"country": "France","state": "Paris"},
{"id": 6,"country": "France", "state": "Occitanie" },
{"id": 7,"country": "Holland","state": "Köln"},
{"id": 8,"country": "Holland","state": "Brüksel"},
{"id": 9,"country": "China","state": "Gansu"},
{"id": 10,"country": "China","state": "Hubei"},
{"id": 11,"country": "China","state": "Hainan"},
{"id": 12,"country": "Iraq","state": "Erbil"},
{"id": 13,"country": "Iraq","state": "Bagdat"}
],
value: '',
statesSel: [],
selectedCountry: '',
}
},
methods: {
getCounty() {
//axios.get('json/country.json')
//.then(res => this.countries = res.data)
},
getStates() {
//axios.get('json/states.json')
//.then(res => {this.states.push(i.state)
},
updateSelected: function(newValue) {
this.selectedCountry = '';
this.statesSel = this.states.filter(s => s.country === newValue.country)
}
},
created() {
this.getCounty()
this.getStates()
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<div id="demo">
<div class="row">
<div class="col-md-4 col-md-ofset-2 form-group">
<label class="typo__label">Select with search</label>
<multiselect v-model="value" placeholder="İl" :multiple="false" :options="options" label="country" track-by="country" :allow-empty="false" #select="updateSelected">
</multiselect>
</div>
<div class="col-md-4 col-md-ofset-2 form-group">
<label class="typo__label">Select with search</label>
<multiselect v-model="selectedCountry" placeholder="İlçe" :multiple="false" :options="statesSel" label="state" track-by="state" :allow-empty="false">
</multiselect>
</div>
</div>
</div>
I'm trying to use a vue.js component to display the following data (in a vue instance) as a table.
But I not sure how to access the data. I tried nested v-for loops.
OUTPUT TABLE
Equp Name | Service Time
Mill Saw | 2018-02-01 10:00:00
Mill Saw | 2018-02-04 10:00:00
Equp Name | Service Time
Jack Hammer | 2018-02-06 12:30:00
VUE COMPONENT
Vue.component('services', {
props: ['value'],
template: '<div>{{value.serviceTime}}</div>'
})
new Vue({
el: '#mydemo1',
data: {
"results": {
"4": [
{
"service": 4,
"serviceTime": "2018-02-01 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "60.00",
"note": ""
},
{
"service": 4,
"serviceTime": "2018-02-04 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "0.00",
"note": null
}
],
"34": [
{
"service": 34,
"serviceTime": "2018-02-06 12:30:00",
"usrname": "chris job",
"eqname": "jack hammer",
"quantity": "0.00",
"rate": "20.00",
"total": "0.00",
"note": "Training"
}
]
HTML
div id="mydemo1">
<services v-for="invoice in results"
v-for="items in invoice"
v-for="details in items"
v-bind:value="invoice"
></services>
Suggestions?
You can do
<table v-for="(invoices, key) in results" :key="key">
<tr>
<th>Equp Name</th>
<th>Service Time</th>
</tr>
<tr v-for="item in invoices" :key="item.serviceTime">
<td>{{ item.eqname }}</td>
<td>{{ item.serviceTime }}</td>
</tr>
</table>
You can check my demo at https://codepen.io/ittus/pen/erMRNL
You should do it in this fashion
<div id="mydemo1">
<services v-for="invoice in results"
v-for="items in invoice">
<div v-for="details in items">Do your stuff ....</div>
</services>
</div>
Yes you can nest v-for loops but you have to put them inside different elements (as div for example)
Btw, you don't need 3 v-for loops to display you data the way you want :
Vue.component('services', {
template: '<div style="display:inline">{{value.serviceTime}}</div>',
props: ['value']
})
new Vue({
el: '#app',
data: {
"results": {
"4": [
{
"service": 4,
"serviceTime": "2018-02-01 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "60.00",
"note": ""
},
{
"service": 4,
"serviceTime": "2018-02-04 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "0.00",
"note": null
}
],
"34": [
{
"service": 34,
"serviceTime": "2018-02-06 12:30:00",
"usrname": "chris job",
"eqname": "jack hammer",
"quantity": "0.00",
"rate": "20.00",
"total": "0.00",
"note": "Training"
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div v-for="invoice in results">
<div v-for="items in invoice">
<div style="display:inline">{{ items.eqname }} |</div>
<services :value="items"></services>
</div>
</div>
</div>
Example here with a table
data table header moves with the table. i tried adding into my code what the Similar Questions had to offer, and more. Nothing seems to work. Can someone view my code and offer suggestions on how to fix the header row? code:
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.css">
<div id="p" class="easyui-panel" title="LP Activity Counts" style="width:1150px;height:500px;padding:0px;">
<table cellpadding="5" cellspacing="0" border="0" id="example" width="100%" class="display">
<thead>
<tr>
<th >FY</th>
<th width="25%">County</th>
<th align="center" style="background-color:white;">Overage</th>
<th align="center" style="background-color:white;">Updated</th>
<th align="center" style="background-color:white;">New</th>
<th align="center" style="background-color:white;">Deleted</th>
<th align="center" style="background-color:white;">Total</th>
<th align="center" style="background-color:white;">Auto</th>
<th align="center" style="background-color:white;">ABS</th>
<th align="center" style="background-color:white;">Needs Fix</th>
<th align="center" style="background-color:white;">Review</th>
<th align="center" style="background-color:white;">Available</th>
<th align="center" style="background-color:white;">FYI</th>
<th align="center" style="background-color:white;">Action</th>
<th align="center" style="background-color:white;">Required</th>
<th align="center" style="background-color:white;">Suspend</th>
<th align="center" style="background-color:white;">Term</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="11" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
var FY = <?php echo $FY; ?>;
var USERID = <?php echo $CMSUserID; ?>
var oTable = jQuery('#example').dataTable( {
"bRetrieve":true,
"bFilter": false,
"bInfo" : false,
"bLengthChange" : false,
"bAutoWidth":true,
"bServerSide": true,
"bPaginate" : false,
"bSort" : false,
"aoColumnDefs": [ { "sClass": "act_counts", "aTargets": [ 2 ] },
{ "sClass": "act_counts", "aTargets": [ 3 ] },
{ "sClass": "act_counts", "aTargets": [ 4 ] },
{ "sClass": "act_counts", "aTargets": [ 5 ] },
{ "sClass": "act_counts", "aTargets": [ 6 ] },
{ "sClass": "approval", "aTargets": [ 7 ] },
{ "sClass": "approval", "aTargets": [ 8 ] },
{ "sClass": "approval", "aTargets": [ 9 ] },
{ "sClass": "submittal", "aTargets": [ 10 ] },
{ "sClass": "submittal", "aTargets": [ 11 ] },
{ "sClass": "flags", "aTargets": [ 12 ] },
{ "sClass": "flags", "aTargets": [ 13 ] },
{ "sClass": "flags", "aTargets": [ 14 ] },
{ "sClass": "flags", "aTargets": [ 15 ] },
{ "sClass": "flags", "aTargets": [ 16 ] },
],
"sAjaxSource": "https://domain/production/dashboard.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "FY", "value": FY } );
aoData.push( { "name": "lpid", "value": "1" } );
aoData.push( { "name": "USERID", "value": USERID } );
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Excel"
}, "copy"
]
}
} );
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
} );
Give or take a few settings this should accomplish what you are trying to including fixed header
var oTable = $('#example').DataTable({
"autoWidth": true,
"processing": true,
"serverSide": true,
"sort": false,
"fixedHeader":true,
"columnDefs": [{ "className": "act_counts", "targets": [2,3,4,5,6] },
{ "className": "approval", "targets": [7, 8, 9] },
{ "className": "submittal", "targets": [10, 11] },
{ "sClass": "flags", "aTargets": [12, 13, 14, 15, 16] },
],
"ajax":{url: "https://domain/production/dashboard.php",
"data": function (aoData) {
aoData.extra = [];
aoData.extra.push({ "name": "FY", "value": FY });
aoData.extra.push({ "name": "lpid", "value": "1" });
aoData.extra.push({ "name": "USERID", "value": USERID });
}
},
// from what I see, no paging, no filtering, no paging info and no page length, now all done with the dom
"dom": 'Bt',
"buttons": ["excelHtml5", "copyHtml5"]
});
The DataTable CDN and Download builder gives you the option as doing it as one file link but I listed them individually so you can see what they are. It looked to me that you might have been missing the button includes. I included ones for html5
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>