Thanks for the quick reply.
I parallel I found out that in the fields declaration it is needed to add a ‘name’ (or replace the ‘field’ to ‘name’) and than it started to works.
Latest posts made by ydl
-
RE: Using QTable Row Actions with 0.15
-
RE: Using QTable Row Actions with 0.15
This line:
{<q-btn @click=‘removeFromList(props.id)’ icon=“delete” />}is a mistake - I want:
<q-btn @click=‘removeFromList(props.id)’ icon=“delete” /> -
RE: Using QTable Row Actions with 0.15
Thanks in advance…
part of the text (string ) are in Hebrew.
The table, on the beginning, is empty. The row are added dynamically by selecting food type.
I need to operation:- update the amount of food (KG) for each row, and
- the ability to remove a row
<q-table
dark
hide-bottom
row-key=“id”
:data=“selectedFoodArray”
:columns=“selectedFoodFields”
:no-data-label=“emptyFoodTable”
>
<q-td slot=“body-cell-action” slot-scope=“props” :props=“props”>
{<q-btn @click=‘removeFromList(props.id)’ icon=“delete” />}
</q-td>
<q-td slot=‘body-cell-weight’ slot-scope=‘cell’>
<q-input color=“white” inverted type=‘number’ v-model=“cell.data” @change=“doCalculate(cell.row.id, cell.data)” />
</q-td>
</q-table>… now functions …
doCalculate: function (id, value) {
this.selectedFoodArray[id].weight = value
this.$root.$emit(‘calculatedFeed’, this.selectedFoodArray)
},
removeFromList: function (id) {
console.log('removeFromList… id: ’ + id)
console.log('removeFromList… length before remove: ’ + this.selectedFoodArray.length)
this.selectedFoodArray.splice(id, 1)
console.log('removeFromList… length after remove: ’ + this.selectedFoodArray.length)
}… field definitions…
selectedFoodFields: [
{
label: ‘’,
field: ‘id’,
width: ‘0’,
sort: false
},
{
label: ‘’,
field: ‘action’,
width: ‘50px’,
sort: false
},
{
label: ‘שם המזון’,
field: ‘name’,
width: ‘300px’,
sort: true
},
{
label: ‘כמות (kg)’,
field: ‘weight’,
width: ‘70px’,
sort: false
},
{
label: ‘DM (%)’,
field: ‘feedDM’,
width: ‘70px’,
sort: false
},
{
label: ‘DE (Mcal/kg)’,
field: ‘feedDE’,
width: ‘70px’,
sort: false
},
{
label: ‘CP (%)’,
field: ‘feedCP’,
width: ‘70px’,
sort: false
},
{
label: ‘Lys (%)’,
field: ‘feedLys’,
width: ‘70px’,
sort: false
},
{
label: ‘Ca (%)’,
field: ‘feedCa’,
width: ‘70px’,
sort: false
},
{
label: ‘P (%)’,
field: ‘feedP’,
width: ‘70px’,
sort: false
},
{
label: ‘Na (%)’,
field: ‘feedNa’,
width: ‘70px’,
sort: false
},
{
label: ‘Cl (%)’,
field: ‘feedCl’,
width: ‘70px’,
sort: false
},
{
label: ‘K (%)’,
field: ‘feedK’,
width: ‘70px’,
sort: false
}
],… and the data (partial TOO long) …
foodTypesOptions: [
{
value: 0,
label: ‘מזון מרוכז-גרעינים’
}, {
value: 1,
label: ‘מזון מרוכז תוצרת איטליה’
}, {
value: 2,
label: ‘מזון גס- מספוא’
}, {
value: 3,
label: ‘מזון גס תוצרת איטליה’
}, {
value: 4,
label: ‘שומנים’
}, {
value: 5,
label: ‘מינרלים/ויטמינים’
}
],
foodOptionsArray: [
[{
value: 0,
label: ‘Bakery Byproduct Meal’
}, {
value: 1,
label: ‘שעורה לחוצה’
}, {
value: 2,
label: ‘נבטי שעורה מאלט’
}, {
value: 3,
label: ‘סלק סוכר זול - מולסה (3%)’
}, {
value: 4,
label: ‘סלק סוכר זול - unmolassed’
}, {
value: 5,
label: ‘לחם - פסולת’
}, {
value: 6,
label: ‘ברואר דגנים - יבשים’
}, {
value: 7,
label: ‘ברואר דגנים - רטוב’
}, {
value: 8,
label: ‘קנולה ארוחה - תמצית mech’
}, {
value: 9,
label: ‘תוצר לוואי של דגנים’
}, {
value: 10,
label: ‘עיסת הדרים מיובשת’
}, {
value: 11,
label: ‘תירס יבש מזוקק דגנים + סול’
}, { -
RE: Using QTable Row Actions with 0.15
@snezhkois - can you explain you solution?
i have tried something like this BUT I am not getting the button and not the input field…<q-td slot=“body-cell-id” slot-scope=“props” :props=“props”>
<q-btn @click=‘removeFromList(props.id)’ icon=“delete” />
</q-td>
<q-td slot=‘body-cell-weight’ slot-scope=‘cell’>
<q-input color=“white” inverted type=‘number’ v-model=“cell.data” @change=“doCalculate(cell.row.id, cell.data)” />
</q-td> -
QDataTable with QInput field
I created the following:
<div class=“row”>
<q-data-table ref=“slectedSomeThing” :config=“selectedSomethingConfig” :data=“selectedSomethingArray” :columns=“selectedSomethingFields”>
<template slot=‘col-weight’ scope=‘cell’>
<q-input primary inverted type=‘number’ v-model=“cell.value” @blur=“leavingRow(cell, cell.row.id, cell.value)” @change=“doCalculate(cell.row.id, cell.value)” />
</template>
</q-data-table>
</div>While testing I set a value in the field BUT when leaving it the value gone EVEN if the ‘selectedSomethingArray’ is updated with the new value via ‘doCalculate’
Any idea how to solved it?
-
RE: Stepper does not store states
I am using v-model…
<q-input primary inverted type=‘number’ v-model=“myVal” v-on:change=‘valUpdate’ />I found a solution by using vuex and update values BUT it is crazy when you have more than 10 variables…
-
Stepper does not store states
I have a 2 steps stepper
In the first one I have an q-input that store information and the value is passed to the second step
When returning back from second step to the first on the field is empty!How I can store the value (state) of the field? or I have to do something to restore the value when stepping back?