I am using nuxt.js to develop a web application ,in that i have on page that page responsible for the custom forms ,please refer the following image
In this page if i click on increment decrement buttons it will create another row upto this part it's working fine,now if i select any column dropdown in first row it's selecting but it's automatically updating all rows column dropdown ,can you please help me to fix this issue ..?
<template>
<div class="pt-5 table-responsive">
<h3>Conditions</h3>
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Column</th>
<th scope="col">Condition</th>
<th scope="col">Input Field</th>
<th scope="col" class="text-right">Add/Remove</th>
</tr>
</thead>
<tbody>
<tr v-for="(input, index) in inputs" :key="index">
<td>{{ index + 1 }}</td>
<td>
<select v-model="fields" class="form-select form-control">
<option
v-for="conditionField in conditionFields"
:key="conditionField.id"
>
{{ conditionField.name }}
</option>
</select>
</td>
<td>
<select v-model="condFies" class="form-select form-control">
<option
v-for="typeCondition in typeConditions"
:key="typeCondition.id"
>
{{ typeCondition.name }}
</option>
</select>
</td>
<td>
<base-input placeholder="Type here"></base-input>
</td>
<td class="text-right">
<base-button type="secondary" #click="addRow(input)"
><i class="ni ni-fat-add"></i>
</base-button>
<base-button type="secondary" #click="removeRow(index, input)"
><i class="ni ni-fat-delete"></i>
</base-button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
inputs: [{}],
fieldInputs: [{}],
conditions: [],
forms: [],
selectedForm: [],
loadedForm: [],
conditionFields: [],
selectFields: [],
condFies: [],
fields: [],
selFields: [],
report: [],
typeConditions: [],
}
},
methods: {
getQueryConditions() {
try {
const axios = this.$axios.create()
axios
.get(
'queryconditions'
// , {
// transformRequest: (headers) => {
// delete headers.common['Organization-Id'];
// }
// }
)
.then((response) => {
this.conditions = response.data.data
this.conditions.forEach((element) => {
if (element.type.includes('condition')) {
console.log(element)
this.typeConditions = this.conditions
}
})
})
} catch (e) {
console.log('error', e)
}
},
},
}
</script>
Related
I would like to filter data in table using checkbox and outoput data will be shown based on checked/unchecked, for example when i'm checked "Show All" will ouput all data, and when i'm unchecked then output only will show some data. but when i'm trying to do this, the result nothing changed when i'm checked
here for vue html:
<div class="col-md-8">
<input type="checkbox" id="checkboxOrder" v-model="checkedValue" value="Onloading Complete" >
<label for="checkboxOrder">Show All</label>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>code</th>
<th>price</th>
<th>status</th>
<th>transporter</th>
<th>driver</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in showOrderDetail" :key="index">
<td >{{Number(index)+1}}</td>
<td>{{item.code}}</td>
<td>{{formatNumber(item.invoice_price)}}</td>
<td :class="statusBackground(item)">
<template v-if="item.t_tour">
<span v-if="!_.isEmpty(item.t_tour.t_tour_detail)">
{{item.t_tour.t_tour_detail[0].status}}
</span>
<span v-else>Unproccess</span>
</template>
<span v-else>Unproccess</span>
</td>
<td class="bg-warning">{{item.m_transporter ? item.m_transporter.name : 'unproccess'}}</td>
<td>{{driver(item)}}</td>
<td><span class="btn btn-primary" #click="showModal(item.t_tour)"><i class="fas fa-search"></i></span></td>
</tr>
</tbody>
</table>
and my vue.js :
import axios from "axios";
import accounting from "accounting";
import ShowTourDetail from "~/pages/transaction/order/ShowTourDetail";
export default {
props: {
rowData: {
type: Object,
required: true
},
rowIndex: {
type: Number
}
},
data() {
return {
t_order_detail: {},
checkedValue:[]
};
},
mounted() {
this.fetchData();
},
computed:{
showOrderDetail(){
if(!this.checkedValue.length)
return this.t_order_detail
return this.t_order_detail.filter(o => this.checkedValue.includes(o.t_tour.t_tour_detail[0].status))
}
},
methods: {
async fetchData() {
this.t_order_detail = {
...(
await axios.get(`/api/order-details`, {
params: { t_order_id: this.rowData.id }
})
).data
};
}
};
You can apply change method like :
<input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" #change="check($event)">
Methos like:
methods: {
check: function(e) {
if(e.target.checked){
console.log("load all data using service");
// service call here
}else{
console.log("load required data using service");
// service call here
}
}
}
This question already has answers here:
use v-model inside a v-for loop
(5 answers)
Closed 2 years ago.
I have a table that displays a certain Nova resource. For each row, I have a selector that would allow me to perform one action from a dropdown. The problem is, let's say I have 3 rows. Each row would have the same selector. Let's say the selector has options A, B, and C. If I go to the first row and select option B, the other selectors also change their currently selected value to B. I'm assuming this is because all of the selectors have the same v-model binding, but I'm not sure how to get around this.
This is the code for the table and the selector:
<table id="favorites">
<tr>
<th>ID</th>
<th>Title</th>
<th>Source</th>
<th>Description</th>
<th>Date of Creation</th>
<th>Posted Status</th>
<th>Actions</th>
</tr>
<tr v-for="(favorite, index) in favorites" :key="index">
<td>{{favorite.id}}</td>
<td>{{favorite.title}}</td>
<td>{{favorite.source}}</td>
<td>{{favorite.description}}</td>
<td>{{favorite.created_at}}</td>
<td>
<div v-if="favorite.posted_status === 2">
<button class="button-posted button4">Posted</button>
</div>
<div v-else>
<button class="button-not-posted button4">Not Posted</button>
</div>
</td>
<td>
<select #change="toggle_posted(favorite)" v-model="selected_state" class="form-control form-control-lg">
<option selected disabled>Choose an action </option>
<option v-for="(state, index) in posted_states" :key="index" :value="state.id">{{state.name}}</option>
</select>
</td>
</tr>
</table>
I want to separate the selectors so that they don't mirror each other. It's also worth noting that while the other selectors change, they don't actually call the toggle_posted method. Only the selector I chose does.
A straight-forward way to fix this would be adding a selected_state attribute for each list item in favorites:
new Vue({
el:"#app",
data: () => ({
favorites: [
{ id:1, title:'1', source:'1', description:'1', created_at:'1', posted_status: 1, selected_state:null },
{ id:2, title:'2', source:'2', description:'2', created_at:'2', posted_status: 2, selected_state:null }
],
selected_state: null,
posted_states: [
{ id:1, name:'1' }, { id:2, name:'2' }
]
}),
methods: {
toggle_posted(favorite) {
console.log(favorite)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table id="favorites">
<tr>
<th>ID</th>
<th>Title</th>
<th>Source</th>
<th>Description</th>
<th>Date of Creation</th>
<th>Posted Status</th>
<th>Actions</th>
</tr>
<tr v-for="(favorite, index) in favorites" :key="index">
<td>{{favorite.id}}</td>
<td>{{favorite.title}}</td>
<td>{{favorite.source}}</td>
<td>{{favorite.description}}</td>
<td>{{favorite.created_at}}</td>
<td>
<div v-if="favorite.posted_status === 2">
<button class="button-posted button4">Posted</button>
</div>
<div v-else>
<button class="button-not-posted button4">Not Posted</button>
</div>
</td>
<td>
<select #change="toggle_posted(favorite)" v-model="favorite.selected_state" class="form-control form-control-lg">
<option selected disabled>Choose an action </option>
<option v-for="(state, index) in posted_states" :key="index" :value="state.id">{{state.name}}</option>
</select>
</td>
</tr>
</table>
</div>
Im looping over a list of objects and I'm trying to have the status of the object be selected by default.
<template>
<table class="table is-striped">
<thead>
<tr>
<th>
Client
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr v-for="client in filteredClients">
<td>
<router-link :to="{ name:'client-show' , params:{clientId: client.uuid}}"
v-on:click.native="selectClient(client)">
{{ client.name }}
</router-link>
</td>
<td>
<div class="select is-rounded">
<select v-model="selectedStatus" #change="statusChange($event, client)">
<option v-for="status in statuses" > {{status}}</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: [
'filteredClients'
],
data: function() {
return {
statuses: [ 'Started', 'Awaiting Payment', 'Paid', 'Onboarding', 'Live']
}
},
computed: {},
mounted() {},
methods: {}
}
</script>
Here i have all the statuses that i need to display but im having a hard time getting a selected value to be selected for each object that im looping over through.
you need to $emit the status change to parent Component so that new status will be assigned to specific client object. (no mutation of props in child)
<select :value="client.status" #change="$emit('change', $event.target.value, client.uuid)">
<option v-for="status in statuses" :selected="status == client.status">{{status}}</option>
</select>
and on your parent Component, capture this emit and assign it to the client
<ParentComponent #change="(status, uuid) => clients.find(c => c.uuid === uuid).status = status">
// child with props: filteredClients
</ParentComponent>
How can I get the value of a specific row in a table in VueJS 2?
This is my table right now
Below is my code to generate a table and two buttons that will show a modals; one is to edit detail and the other is to show the QR Code coming from the database. I want to get the last value of the loop and put it in SHOW QR Button and the Show QR Button will contain the last value from the loop.
<div class="myTable table-responsive">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Member ID</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="result in filteredList" :key="result.id">
<td>{{result.Memb_ID}}</td>
<th>{{result.First_Name}}</th>
<th>{{result.Middle_Name}}</th>
<th>{{result.Last_Name}}</th>
<th>{{result.Address}}</th>
<div class="row justify-content-center">
<b-button v-b-modal.showDetails size="lg" class="showDetails" variant="danger">Edit</b-button>
<b-button v-b-modal.modalQR size="lg" class="showQR" variant="success">Show QR</b-button>
</div>
</tr>
</tbody>
</table>
</div>
This is my modal where I want to have different QR for every user to be inserted.
Below is my modal for the Show QR Button
<b-modal id="modalQR" title="Generated Details">
<div class="showQR text-center">
<qrcode-vue :value="results.url" :size="size" level="H"></qrcode-vue>
</div>
</b-modal>
and below is my script
<script>
import QrcodeVue from "qrcode.vue";
import axios from "axios";
export default {
data() {
return {
search: "",
results: {},
value: "",
size: 200,
selected: [],
};
},
computed: {
filteredList() {
return this.results.filter(post =>
post.First_Name.toLowerCase().includes(this.search.toLowerCase())
);
}
},
methods: {
getUsers() {
axios
.get("localhost:9000/user/")
.then(response => (this.results = response.data))
.catch(error => console.log(error.message));
}
},
components: {
QrcodeVue
},
mounted() {
this.getUsers();
}
};
</script>
v-for also gives you the index of the item you're on:
<tr v-for="(result, index) in filteredList" :key="result.id">
Then you can just use index === filteredList.length
You can try this:
<tr v-for="result in filteredList.data" :key="result.id">
<td>{{result.Memb_ID}}</td>
Here is my problem regarding to-do task management.
I want to update an option value in select selector when the (change) event is triggered.
there are 2 Component
//app.component.ts
//array object
this.dataArr[this.counter] = {id: this.task_ID, name: this.t_name, msg: this.t_msg, date: this.task_date};
//console.log(this.counter);
console.log(this.dataArr[this.counter]);
//local storage
if (typeof(Storage) !== "undefined") {
localStorage.setItem("taskM", JSON.stringify(this.dataArr.reverse())); //put object array in reverse order to show latest object at top position
this.myObj = JSON.parse(localStorage.getItem("taskM"));
}
in this component I want to change and save select option value to localStorage
//task-form.component.ts.
import { Component, OnInit, Input, Output } from '#angular/core';
import { AppComponent } from './app.component';
#Component({
selector: 'task-data',
template: `<h3>List of Task</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Task Id</th>
<th>Task Title</th>
<th>Description</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of taskMM">
<td> {{ hero.id }} </td>
<td> {{ hero.name }} </td>
<td> {{ hero.msg }} </td>
<td> {{ hero.date }} </td>
<td>
<select class="form-control">
<option *ngFor="let p of taskStatus"[value]="p"> {{p}}</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
`
})
export class TaskFormComponent {
taskStatus: string[];
taskMM: string[] = JSON.parse(localStorage.getItem("taskM"));
#Input('task-s') t_status: string;
#Input() data1: any= [];
onChange(deviceValue) {
console.log(deviceValue);
}
ngOnInit() {
console.log('this is ngOnInit ');
}
constructor() {
this.taskStatus = ['Started', 'Pending', 'Completed'];
}
}
<select (change)="onChange($event.target.value)" class="form-control">
<option *ngFor="let p of taskStatus"[value]="p"> {{p}}</option>
</select>
onChange($event) {
localStorage.setItem("taskM", $event);
}