How to pass props to eventhandler function. #14809
Answered
by
hekep
hekep
asked this question in
General - Components / Directives / etc
-
|
There is a table in page. Whenever a value is selected in "Client Id" select box, it should update the same row "Article Title" text field. Basicly I want the Currently only 1 row works:
The following rows do not work, if there is overlapping value in "Client Id" column.
Code looks like this: <template>
<q-page class="q-pa-md" style="">
<q-form @submit="onSubmit" @reset="onReset" class="q-ma-md">
<q-card class="row justify-center shadow-1 q-gutter-md">
<div class="q-ma-lg" style="clear: both; width: 100%;" >
<q-table
title="Related Articles"
:rows="artcategoryHasManyArticlesRows"
:columns="artcategoryHasManyArticlesColumns"
rows-per-page-label=""
row-key="autoIncrement"
:hide-pagination="true"
:rows-per-page-options="[]"
v-model:pagination="hasManyTablesPagination"
:visible-columns="[
'client_id',
'article_title',
]"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="client_id" :props="props">
<div>
<!--
How to pass props.row to
@update:model-value="val => onArtcategoryHasManyArticlesClientIdChange(val)" ???
-->
<q-select
filled
v-model="props.row.entityClientId"
:options="entityArtcategoryHasManyArticlesClientIdOptions"
color="teal"
class="col-12"
options-selected-class="text-deep-orange"
@update:model-value="val => onArtcategoryHasManyArticlesClientIdChange(val)"
>
</q-select>
</div>
</q-td>
<q-td key="article_title" :props="props">
<div>
<!-- normal string field, Article Title -->
<q-input
class="col-12"
bottom-slots
v-model="props.row.entityArticleTitle">
</q-input>
</div>
</q-td>
</q-tr>
</template>
</q-table>
<div class="col-12 q-my-md text-center">
<q-btn label="Add Article Row"
color="primary"
@click="entityArtcategoryHasManyArticlesAddRow()"
/>
</div>
</div>
</q-card>
</q-form>
</q-page>
</template>
<script>
/**
*
*/
import { ref, onMounted } from "vue";
/**
*
*/
import { Notify, Dialog } from "quasar";
/**
*
*/
import { useRouter } from "vue-router";
/**
*
* Pagination for has Many Association Tables
*
* @type type
*/
const hasManyTablesPagination = ref({
//page: 1,
rowsPerPage: 200,
//rowsNumber: 10,
//sortBy: "",
//descending: false,
});
// entityWithHasManyAssociations
/**
*
* hasManyAssocAlias: Articles / Property: articles
* Columns:
*
*/
const artcategoryHasManyArticlesColumns = [
{
name: "autoIncrement",
label: "", // not visible column
align: "left",
field: (row) => row.autoIncrement,
format: (val) => `${val}`,
sortable: false,
},
{
name: "client_id",
label: "Client Id",
align: "left",
field: (row) => row.entityClientId,
format: (val) => `${val}`,
sortable: false,
},
{
name: "article_title",
label: "Article Title",
align: "left",
field: (row) => row.entityArticleTitle,
format: (val) => `${val}`,
sortable: false,
}
];
/**
*
* artcategoryHasManyArticlesRows can and should contain:
* [
* {
* autoIncrement: 0,
* entityClientId: "" , // backend Database field value
* entityArticleTitle: "" , // backend Database field value
* },
* ]
*/
const artcategoryHasManyArticlesRows = ref([]);
/**
* Reactive options for client_id field in Articles HasMany association
* Contains array of objects , { 'value': 'primaryKey' , 'label' : 'label description' }
*
*/
const entityArtcategoryHasManyArticlesClientIdOptions = ref([]);
/**
*
* Adds a new empty row , Articles HasMany association
*
*/
function entityArtcategoryHasManyArticlesAddRow() {
var newRowObject = {
autoIncrement: artcategoryHasManyArticlesRows.value.length + 1,
entityClientId: "",
entityArticleTitle: "",
};
artcategoryHasManyArticlesRows.value.push(newRowObject);
}
/**
*
*/
export default {
/**
*
*/
props: {
// add page no ID props
},
/**
*
* The new setup component option is executed before the
* component is created, once the props are
* resolved, and serves as the entry point
* for composition APIs.
*
*/
setup(props) {
/**
*
*/
const router = useRouter();
/*
* Function onArtcategoryHasManyArticlesClientIdChange(props)
* It is triggered, when the drop down value changes
*
*/
function onArtcategoryHasManyArticlesClientIdChange(newValue) {
console.log(' onArtcategoryHasManyArticlesClientIdChange(newValue) newValue.value: ', newValue.value);
//console.trace();
// find out wich row changed
var changedRowNr = false;
for (var rowNr = 0; rowNr < artcategoryHasManyArticlesRows.value.length; rowNr++) {
var row = artcategoryHasManyArticlesRows.value[rowNr];
// console.log(rowNr, ' onArtcategoryHasManyArticlesClientIdChange: rowNr, row: ', rowNr, row);
if (row.entityClientId.hasOwnProperty('value') === false) {
console.log(rowNr, ' onArtcategoryHasManyArticlesClientIdChange: no value set in rowNr, row: ', rowNr, row);
continue;
}
// comparing integers
console.log(rowNr, ' comparing integers comparing row.entityClientId.value : ', row.entityClientId.value);
if (parseInt(row.entityClientId.value) === parseInt(newValue.value)) {
changedRowNr = rowNr;
break;
} // EOF comparing integers or comparing strings
} // EOF for(var rowNr = 0; rowNr < artcategoryHasManyArticlesRows.value.length; rowNr++)
if (changedRowNr === false) {
console.log('onArtcategoryHasManyArticlesClientIdChange(newValue): could not find any updated row');
return;
}
console.log('changedRowNr:', changedRowNr,
' FOUND an updated row, with value: ',
row.entityClientId.value,
);
row.entityArticleTitle = row.entityArticleTitle + 'Client Id new value: ' + row.entityClientId.value + ' ';
}// EOF onArtcategoryHasManyArticlesClientIdChange(newValue)
/**
* Get select box drop down options ( BelongsTo associations )
* getAssociationsData
*/
function getAssociationsData() {
entityArtcategoryHasManyArticlesClientIdOptions.value = [
{value: 1, label: 'Client 1'},
{value: 2, label: 'Client 2'},
{value: 3, label: 'Client 3'}
];
} // EOF function getAssociationsData()
onMounted(() => {
getAssociationsData();
}); // end of onMounted(() => {
return {
hasManyTablesPagination,
artcategoryHasManyArticlesColumns,
artcategoryHasManyArticlesRows,
entityArtcategoryHasManyArticlesAddRow,
entityArtcategoryHasManyArticlesClientIdOptions,
onArtcategoryHasManyArticlesClientIdChange,
getAssociationsData,
}; // EOF return {
}, // EOF setup(props) {
}; // EOF export default {
</script> |
Beta Was this translation helpful? Give feedback.
Answered by
hekep
Nov 7, 2022
Replies: 2 comments
-
|
I recreated the issue: |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
solution: https://codesandbox.io/s/condescending-ganguly-xq0zyd?file=/src/pages/Index.vue <template>
<q-page class="q-pa-md" style="">
<q-form class="q-ma-md">
<q-card class="row justify-center shadow-1 q-gutter-md">
<div class="q-ma-lg" style="clear: both; width: 100%">
<q-table
:rows="artcategoryHasManyArticlesRows"
:columns="artcategoryHasManyArticlesColumns"
rows-per-page-label=""
row-key="autoIncrement"
:hide-pagination="true"
:rows-per-page-options="[]"
v-model:pagination="hasManyTablesPagination"
:visible-columns="['client_id', 'article_title']"
>
<template v-slot:body="props">
<q-tr :props="props" title="">
<q-td key="client_id" :props="props">
<div>
<!-- how to provide props.row to @update:model-value=eventHandler() ??? -->
<q-select
filled
:options="entityArtcategoryHasManyArticlesClientIdOptions"
color="teal"
class="col-12"
options-selected-class="text-deep-orange"
v-model="props.row.client_id"
@update:model-value="
onArtcategoryHasManyArticlesClientIdChange(
$event,
props
)
"
>
</q-select>
</div>
</q-td>
<q-td key="article_title" :props="props">
<div>
<!-- normal string field, Article Title -->
<q-input
class="col-12"
bottom-slots
v-model="props.row.entityArticleTitle"
>
</q-input>
<pre>
{{ props.row }}
</pre
>
</div>
</q-td>
</q-tr>
</template>
</q-table>
<div class="col-12 q-my-md text-center">
<q-btn
label="Add Article Row"
color="primary"
@click="entityArtcategoryHasManyArticlesAddRow()"
/>
</div>
</div>
</q-card>
</q-form>
</q-page>
</template>
<script>
/**
*
*/
import { ref, onMounted, watch, triggerRef } from "vue";
/**
*
*/
import { Notify, Dialog } from "quasar";
/**
*
*/
import { useRouter } from "vue-router";
/**
*
* Pagination for has Many Association Tables
*
* @type type
*/
const hasManyTablesPagination = ref({
//page: 1,
rowsPerPage: 200,
//rowsNumber: 10,
//sortBy: "",
//descending: false,
});
// entityWithHasManyAssociations
/**
*
* hasManyAssocAlias: Articles / Property: articles
* Columns:
*
*/
const artcategoryHasManyArticlesColumns = [
{
name: "autoIncrement",
label: "", // not visible column
align: "left",
field: (row) => row.autoIncrement,
format: (val) => `${val}`,
sortable: false,
},
{
name: "client_id",
label: "Client Id",
align: "left",
field: (row) => row.entityClientId,
format: (val) => `${val}`,
sortable: false,
},
{
name: "article_title",
label: "Article Title",
align: "left",
field: (row) => row.entityArticleTitle,
format: (val) => `${val}`,
sortable: false,
},
];
/**
* Table rows for hasManyAssocAlias: Articles
* artcategoryHasManyArticlesRows can and should contain:
* [
* {
* autoIncrement: 0,
* entityClientId: "" , // backend Database field value
* entityArticleTitle: "" , // backend Database field value
* },
* ]
*/
/**
* Reactive options for client_id field in Articles HasMany association
* Contains array of objects , { 'value': 'primaryKey' , 'label' : 'label description' }
*
*/
const entityArtcategoryHasManyArticlesClientIdOptions = ref([]);
/**
*
* Adds a new empty row , Articles HasMany association
*
*/
const artcategoryHasManyArticlesRows = ref([]);
function entityArtcategoryHasManyArticlesAddRow() {
var newRowObject = {
autoIncrement: artcategoryHasManyArticlesRows.value.length + 1,
entityClientId: "",
entityArticleTitle: "",
};
artcategoryHasManyArticlesRows.value.push(newRowObject);
}
/**
*
*/
export default {
/**
*
*/
props: {
// add page no ID props
},
/**
*
* The new setup component option is executed before the
* component is created, once the props are
* resolved, and serves as the entry point
* for composition APIs.
*
*/
setup(props) {
/**
*
*/
const router = useRouter();
/*
* Function onArtcategoryHasManyArticlesClientIdChange(props)
* It is triggered, when the drop down value changes
*
*/
function onArtcategoryHasManyArticlesClientIdChange(event, props) {
const newClientId = event.value;
const { row, pageIndex, rowIndex } = props;
row.clientId = newClientId;
console.log("clientIdchanged", props);
} // EOF onArtcategoryHasManyArticlesClientIdChange(newValue)
/**
* Get select box drop down options ( BelongsTo associations )
* getAssociationsData
*/
function getAssociationsData() {
entityArtcategoryHasManyArticlesClientIdOptions.value = [
{ value: 1, label: "Client 1" },
{ value: 2, label: "Client 2" },
{ value: 3, label: "Client 3" },
];
} // EOF function getAssociationsData()
onMounted(() => {
getAssociationsData();
}); // end of onMounted(() => {
watch(artcategoryHasManyArticlesRows.value, (newValue) => {
console.log(
"any values changed in side artcategoryHasManyArticlesRows",
newValue
);
}); // EOF watch(artcategoryHasManyArticlesRows.value, (newValue)
return {
hasManyTablesPagination,
artcategoryHasManyArticlesColumns,
artcategoryHasManyArticlesRows,
entityArtcategoryHasManyArticlesAddRow,
entityArtcategoryHasManyArticlesClientIdOptions,
onArtcategoryHasManyArticlesClientIdChange,
getAssociationsData,
}; // EOF return {
}, // EOF setup(props) {
}; // EOF export default {
</script> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
hekep
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
solution:
https://codesandbox.io/s/condescending-ganguly-xq0zyd?file=/src/pages/Index.vue