Dynamic v-model bindings in input fields do not update visually

tonyskulk

Every field in the dialog has an underlying model like ‘newSession[column.name]’, eg. ‘newSession.label’. And depending on what type ‘newSession[column.name]’ has, it should display an editable component like this:

boolean -> checkbox
array -> QSelect
everything else -> plain QInput

s.molinari

So, which part of the data is supposed to be remapped to an array? Can you give me an example of a key in the data?

Scott

s.molinari

Needless to say, what you’ve attempted isn’t going to work (as we can see). You’re going to need to do more with the data, before it reaches QTable. I’m just trying to understand how the select is going to offer the object data as an array selection from your data.

Scott

tonyskulk

So, which part of the data is supposed to be remapped to an array? Can you give me an example of a key in the data?

In the column definition in constants.js there is for example the field ‘net_arch_pi’ defined by

{
name: 'net_arch_pi',
label: 'Policy Network',
reference: 'training.policy_kwargs.net_arch.args.pi',
field: row =>
  _.get(row, 'training.policy_kwargs.net_arch.args.pi', [64, 64]),
format: val => '[' + val.reduce((a, b) => a + ' - ' + b) + ']',
sortable: true
},

which is an array of integers like [64,64] or [512,512,512].
So we map this field to a table column basically by

field: row =>.get(row, 'training.policy_kwargs.net_arch.args.pi')

which is just the lodash implementation of

field: row => row.training.policy_kwargs.net_arch.args.pi

So when opening the dialog we actually map

data.training.policy_kwargs.net_arch.args.pi

to

newSession.net_arch_pi

which should be editable on the dialog screen by a QSelect component.

But I wonder if it is only concerned to QSelect components, because I have the same effect on any ‘input field’ on any newSession.XXXX attribute. I also think that the mapping is fine as we can see that in the dialog the data is correctly displayed at first.

metalsadman

Tldr; as far as i can see above, theres nothing wrong in the components in question, its how you are structuring your data, imo i think you need some more time restructuring it or see and understand more how the component works, the docs should help. A codesandbox should also help so you can show what is working so far or whatnot, and in the end we can support you further.

Check The quasar codesandbox what @s-molinari linked above, imo would rather see a running code than code you posted in this thread, when at first look is rather complex or need restructuring*.

s.molinari

Hey Aldrin. He did put together a sandbox. https://codesandbox.io/s/codesandbox-app-5hxoc

Scott

metalsadman

@s-molinari said in Dynamic v-model bindings in input fields do not update visually:

Hey Aldrin. He did put together a sandbox. https://codesandbox.io/s/codesandbox-app-5hxoc

Scott

Sry didnt see that as thread has become *tldr’ish, well that’s a start. Ty.

tonyskulk

Hi, yes I have put a sample on codesandbox. In my last post I just explained further what I wanted to have at the end, so that it is more clear when looking at the code.

kowy

I have the same problem with q-input. I have tried to dynamically create a set of q-inputs as @tonyskulk did. And the same result. The underlying model changes but, visually the value of q-input returns back just after focus out of the q-input.

quasar - 1.1.0
@quasar/app - 1.0.6
@quasar/extras - 1.3.1
vue - 2.6.10

metalsadman

@kowy said in Dynamic v-model bindings in input fields do not update visually:

I have the same problem with q-input. I have tried to dynamically create a set of q-inputs as @tonyskulk did. And the same result. The underlying model changes but, visually the value of q-input returns back just after focus out of the q-input.

quasar - 1.1.0
@quasar/app - 1.0.6
@quasar/extras - 1.3.1
vue - 2.6.10

you need to set a key if you are using v-for’s. otherwise make a codepen.

kowy

@metalsadman Thank you for your quick answer, but the problem was on another place. It was connected rather with Vue.js than with Quasar Framework.
Here is my problematic code (very simplified):

<div class="col-2 q-mr-md" v-for="option in editRowOptions" :key="option._id">
      <component :is="option.type" :label="option.label" :key="option._id" v-model="editedRow[option.model]"></component>
</div>

<script>
  data: () => ({
    editRowOptions: [ {type: 'QInput', _id: '50m', model: '50m_model', label: '50 m run'} ],  // dynamically loaded
    editedRow: {}
  }),

  methods: {
    editRow() {
      this.editedRow = { _id: 22 };
      // below values are filled in a loop which has dynamic content. That's why they are not set directly in row above
      this.editedRow['50m_model'] = '12:25'; 
      // ^^^^ problematic row
    } 
  }
</script>

The root problem was that attributes set later (they were not initialized in object { _id: 22 }) are missing Vue’s reactiveGetters and reactiveSetters.

Here’s my solution:

...
    editRow() {
      const _editedRow = { _id: 22 };
      _editedRow['50m_model'] = '12:25'; 
      this.editorPerson = Object.assign({}, _editorPerson);
    }