I have a select dropdown where I get data from an API, later I add the value of the item selected on a table. All works good but when I click in addItem() I add the id value of the item of the select, but I want to show the name_value instead of the id on the table. At the same time, I need to get the id value of the select item.
Select code (VUEJS):
<select
id="select1"
ref="seleccionado"
v-model="id_equipo"
required
>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
button addItem:
<v-btn
color="blue darken-1"
#click="addItem()"
>
Aregar Equipo
</v-btn>
table:
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
function addItem:
addItem () {
var equipos_torneo = {
id_torneo: this.id_torneo,
id_equipo: this.id_equipo,
}
this.rowData.push(equipos_torneo)
},
Try this way instead:
<template>
<div>
<!-- Your select code -->
<select id="select1" ref="seleccionado" v-model="id_equipo" required>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
<!-- Your button code -->
<v-btn
color="blue darken-1"
#click="addItem()"
>
Aregar Equipo
</v-btn>
<!-- Your table code -->
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
methods: {
addItem () {
// Search the object in the equipos array with the selected id from the select
let equipos_torneo = this.equipos.find(v.id_equipo === this.id_equipo);
// If object gets found successfully, push to the rowData array
if(equipos_torneo) this.rowData.push(equipos_torneo);
},
},
}
</script>
Related
Have to select dropdown and Selected dropdown value should be updated in immediate column(td) value in the table. I tried with the below code, I can able to populate dropdowns and I can select options from the dropdown. But selected dropdown need to update in the immediate "td" column. Please find attached a screenshot and stackblitz for the demo.
HTML code:
<select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
<option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
ts code:
this.http.get(dataUrl).subscribe(response => {
this.persons = response.data.map(x=>({...x,check:false,test:'test'}));
this.dtTrigger.next();
});
Stackblitz for Demo
The column seems to point to firstName instead of the test that you have binded on the dropdown.. So you might want to change it to <td>{{ person.test}}</td>.
Example:
<tbody>
<tr *ngFor="let person of persons;let i = index;">
<td><input [(ngModel)]="person.check" type="checkbox" class="checkboxCls" name="id" ></td>
<td>{{ person.id }}</td>
<td>
<span id={{i+1}})>{{ person.firstName }}</span><br/>
<select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
<option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
</select>
</td>
<td>{{ person.test }}</td> <---HERE
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
Also, if you want to have it initialised with the first name; you can change your map function to add the first name instead of 'test'
this.persons = response.data.map(x=>({...x,check:false,test:x.firstName}));
I have a data-table in Vue.js component using Vuetify with a input inside a row, and I need to disable a button if the input v-model="row.item.quantidade" was empty. but doesn't work.
HTML
<v-data-table :headers="headersAllStep3" :items="step2" :search="searchAllStep3">
<template v-slot:item="row">
<tr>
<td>{{ row.item.produto }}</td>
<td>{{ row.item.descricao }}</td>
<td>{{ row.item.ncm }}</td>
<td><input type="number" v-model="row.item.quantidade" autofocus></td>
</tr>
</template>
</v-data-table>
<v-btn :disabled="isDisableQuantidade()">
Continue
</v-btn>
Javascript method in vue.js component
isDisableQuantidade(){
return this.step2.quantidade.length == false;
},
The function :
isDisableQuantidade(){
return this.step2.some(step=>step.quantidade==0);
},
should be a computed property and it must be used without () like :
<v-btn :disabled="isDisableQuantidade">
Continue
</v-btn>
Just new to use Vue.js and I have a question:
I have a array to build a table. If I double click the table row, the program will call a javascript function to get the selected item by its index.
<div id="vm-table">
<table>
<tr v-for="(item, index) in items" ondblclick="getItem('{{ index }}')">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#vm-table",
data: {
items: []
}
});
</script>
I assume the array "items" already contains a list of items. In the above "tr" line it seems cannot get the "index" value and the value must be used in the inner "td" elements. If I need to get the parameter of index how can I do?
Thanks,
Try this instead :
<tr v-for="(item, index) in items" #dblclick="getItem(index)">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
I have a table and inside it I have a select
<tbody>
#foreach($cheques as $key => $cheque)
<tr data-id="{{ $cheque->id }}">
<td>{{ $cheque->reference }}</td>
<td>{{ $cheque->amount }}</td>
<td>{{ $cheque->owner }}</td>
<td>{{ $cheque->receiver }}</td>
<td>{{ $cheque->date_entree->format('d/m/Y') }}</td>
<td>{{ $cheque->date_payment->format('d/m/Y') }}</td>
<td>
<select name="statue" class="form-control" id="statue">
<option value="0" {{ $cheque->statue == "0" ? 'selected':'' }}>{{ __('messages.cheques.waiting') }}</option>
<option value="1" {{ $cheque->statue == "1" ? 'selected':'' }}>{{ __('messages.cheques.payed') }}</option>
<option value="2" {{ $cheque->statue == "2" ? 'selected':'' }}>{{ __('messages.cheques.not_payed') }}</option>
<option value="3" {{ $cheque->statue == "3" ? 'selected':'' }}>{{ __('messages.cheques.transfered') }}</option>
</select>
</td>
<td>
<i class="fa fa-edit"></i>
<i class="fa fa-trash-alt"></i>
</td>
</tr>
#endforeach
</tbody>
and i want when ever the select statue change i want to pop the model and this is what i done
$("#statue").on('change', function(e){
e.preventDefault();
var tr = $(this).parents('tr');
var id = $(tr).data('id');
var statue = $(this).val();
bootbox.confirm({
size: "small",
message: "{{__('messages.cheques.statue_confirmation')}}",
buttons: {
confirm: {
label:"{{__('messages.buttons.confirm')}}",
className: 'btn-sm btn-danger'
},
cancel: {
label:"{{__('messages.buttons.cancel')}}",
className: 'btn-sm btn-defaul'
}
},
callback: function(result){
if(result){
if(statue == 3){
$("#transfer-cheque-form").find("#id").val(id);
$("#transfer-cheque").modal();
}else{
$.post('change-statue/'+id, {_token:$('meta[name="csrf-token"]').attr('content'), statue:statue}, function(data){
if(data.success){
}
});
}
}
}
});
});
but the problem is the model popup only on the first item on the table otherwise nothing happens
i'm using an template ready who has a dynamic table with pagination
I suspect the issue is you are grabbing it by id of statue. The id is supposed to only correspond with one item on the page (id's should be unique). What you probably want to do is add a class to your select and modify your jquery selector to select that class instead.
<select name="statue" class="form-control" id="statue" class="statue-select">
$(".statue-select").on('change', function(e) {
...
});
Firstly an HTML DOM can only contain single with an ID. You can do :
$('select[name="statue"]').on('change', function(e) {
...
});
If your elements are getting appended/manipulated dynamically on ajax pagination for example, you can do :
$(document).on('change', 'select[name="statue"]', function(e) {
...
});
You should not have a static ID in the select element, you can solve the problem adding a function to listen the select change
function myFunction(event){
//TODO
}
<select onchange="myFunction(event)">
I have a question for you guys, I have a table that contains student time information and dates, for the quarter. I would like to add a time picker so the instructors can select to show just the information between this date and that day.
Basically, I want to use the Entry time field to filter and show just data from x date to x date.
Here is my code
<v-card>
<v-card-title>
Student Profile
<v-spacer></v-spacer>
</v-card-title>
<v-data-table :headers="headers2"
:pagination.sync="pagination2"
:items="profile"
:search="search">
<template slot="items" slot-scope="props">
<td>{{ props.item.sid }}</td>
<td class="text-xs-left">{{ props.item.firstName }}</td>
<td class="text-xs-left">{{ props.item.lastName }}</td>
<td class="text-xs-left">{{ props.item.course }}</td>
<td class="text-xs-left">{{ props.item.entryTime }}</td>
<td class="text-xs-left">{{ props.item.exitTime }}</td>
<td class="text-xs-left">{{ props.item.duration }}</td>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "{{ searchQuery }}" found no results.
</v-alert>
</v-data-table>
</v-card>
Method
methods: {
editStudent(sid) {
this.dialog = true;
this.editedSid = sid;
axios.get('/api/e', {
params: {
'sid': this.editedSid
}
}).then(response => {
this.profile = response.data
}).catch(e => {
console.log(e)
})
}
}
Any suggestions?
What you'll want to do is add a "computed property" that filters the original data, and use it instead.
something like
computed: {
filteredEntries(){
return this.profile.filter(entry => {
//check if the entry is between the selected dated
});
}
}
Then use 'this.filteredEntries' instead of 'this.profile' when initializing the table.