[Solved] How to update form field value dynamically when back from a dialog

[Stanley]

I write a customized component (based Q-Modal), this is a search help dialog that return the different value according by user input. The code like this
<template>
<q-modal v-model=“layoutModal”>
<q-btn @click=“onShlpPickup()” icon=“done” label=“OK” />

<script>
export default {
props: {
layoutModal: Boolean,
fieldName: String
},
methods: {
onShlpPickup () {
this.$emit(‘callBack’, { retValue: this.returnValue)
}

Now go to the main screen.
<template>
<form>
<q-input v-model=“f1” :after="[{icon: ‘search’, handler () { searchHelp(‘f1’) }}]"/>
<q-input v-model=“f2” :after="[{icon: ‘search’, handler () { searchHelp(‘f2’) }}]"/>
</form>
<search-help :layoutModal=“layoutModal” :fieldName=“fieldName” @callBack=“onCallBack”/>

<script>
import SearchHelp from ‘components/search-help’
export default {
data () {
return {
f1,
f2,
layoutModal: false,
fieldName: ‘’
}
},
methods: {
searchHelp (fieldName) {
this.layoutModal = true
this.fieldName = fieldName
},
onCallBack (payLoad) {
this.layoutModal = false
console.log(payLoad.retValue)
// question here? How to update field value “f1, f2” dynamically according by which component user has clicked
}

[chbarr]

this.$emit(‘callBack’, { fieldName: this.fieldName, retValue: this.retValue }) in onShlpPickup ()

and

this[payLoad.fieldName] = payLoad.retValue in onCallBack (payLoad)

[Stanley]

This post is deleted!

[Stanley]

@chbarr Thank you!
The value is updated but the value on the screen is not refreshed.
Do you know how to solve it?

[Stanley]

@chbarr one thing inform to you, this issue only occurs in nested structure.
for example: this[student.header.firstName]
Could you please help check it, thanks!

[chbarr]

i think if fieldName is a nested structure, it’s a little bit complicated.

onCallBack (payLoad) {
  let fieldToUpdate = this
  for (let subfield in payload.fieldName.split('.')) {
    fieldToUpdate = this.subfield
  }
  this[fieldToUpdate] = payLoad.retValue
}

[Stanley]

@chbarr Thanks! But it still does not work. The variable subfield in each call are like 0, 1, 2.
The value on the screen still does not refresh. Could you please have a look again, thanks!

[chbarr]

This post is deleted!

[chbarr]

typo in my answer, it’s:
for (let subfield of payload.fieldName.split(’.’))

[Stanley]

@chbarr Yes, I changed like that. It can get the field name now. But it seems the value “this.subfield” is undefined. Could you please have a look again, thanks!

[chbarr]

sorry another typo:

onCallBack (payLoad) {
  let fieldToUpdate = this
  for (let subfield of payload.fieldName.split('.')) {
    fieldToUpdate = this[subfield]
  }
  fieldToUpdate = payLoad.retValue
}

[phato777]

Perhaps this:
https://vuejs.org/v2/api/#Vue-set

If it’s a nested object, you have to use set in order for Vue to react visually to the change.

More info on Vue reactivity:
https://vuejs.org/v2/guide/reactivity.html

[Stanley]

@phato777 thanks a lot! it works now.

[Stanley]

@chbarr I know you purpose but it still does not works until using Vue.set. Anyway thanks a lot for help.