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>
Related
In my vuejs project I have an empty "CatalogItems" array. Thanks to a method I push data into this array, and when I do
console.log(this.catalogItems)
We see that my table contains 30 objects.
These objects contain several attributes (id, locale, ..), and among these attributes there is an object named "configuation" which contains the attribute "format".
On my front I have a loop with a v-for, its purpose is to display the different attributes of each object in my "CatalogItems" array.
<tr v-for="data in catalogItems" :key="data.value">
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
<td>{{ data.locale }}</td>
<td>{{ data.configuration }}</td>
<td>{{ data.date }} <br> {{ data.heure }}</td>
<td class="sousMenuTable flex justifyContentBetween">
<span class="flex alignItemsCenter justifyContentCenter">{{ data.nombreDetecte }}</span>
<span class="flex alignItemsCenter justifyContentCenter">{{ data.nombreInsere }}</span>
<span class="flex alignItemsCenter justifyContentCenter">{{ data.nombreRejete }}</span>
</td>
<td>{{ data.type }}</td>
<td>{{ data.load_frequency }}</td>
<td class="marginRight15">
<div class="ti-pencil flex justifyContentCenter alignItemsCenter"></div>
</td>
<td>
<div class="switchOnOff flex alignItemsCenter" :data-etat="data.etat" #click="switchStatus">
<div class="circle"></div>
<span class="bold uppercase">{{ data.etat }}</span>
</div>
</td>
</tr>
My problem is that on my front end I can't display the "format" attribute of my "configuration" object present in my "CatalogItems" object array.
I tried to do this :
<td v-for="element in data.configuration">
{{ element.format }}
</td>
But I have no visible results (nor any errors)
data.configuration looks like an object and not an array.
you should try to replace
<td v-for="element in data.configuration">
{{ element.format }}
</td>
by
<td>
{{ data.configuration.format }}
</td>
You have probably an error in the last interpolation {{ element.format }} - you are accessing field format of elements of data.configuration, you should remove .format (since it's undefined). You can see working example of what you are trying to achieve in this codesandbox https://codesandbox.io/s/angry-chatterjee-nzgwuv?file=/src/App.vue
I can't explain why.. but! I show it to a friend, retry the same thing as I try the morning and it works..
The answer is
<td>{{ data.configuration.format }}</td>
Thanks for your answers! Have a nice day
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>
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 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.
How I pass an object as a parameter in a ng-click within a ng-repeat?
Example:
<tr data-ng-repeat="table in tables">
<td>{{ table.name }}</td>
<td>{{ isActive(table.active) }}</td>
<td>{{ table.initialDate }}</td>
<td>{{ table.finalDate }}</td>
<td>
<button data-ng-click="updateTable(table)">Update</button>
</td>
</tr>
Inside the ng-click updateTable(HERE), I want to pass my object table.
Can someone help me?
In your component.html edit your code as shown below :
<td><button (click)=updateTable(table)>Update</button></td></tr>
then in your typescript code just declare the function
updateTable(table){
console.log(table); //write your own code here!.
}