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



  • I’m not sure it makes a difference, but you start with newSesssion as an object in data, but it should be an array.

    Also, try this for getting your code up as a working example: https://codesandbox.quasar.dev.

    Scott



  • Actually it´s an object. I am referencing the fields via ‘[]’, only because I want to use dynamic field names. I will try to put my code online with your link, thanks!



  • From the QSelect API in the docs.

    97c10b3f-416c-48d9-ad3e-778339dc51a1-image.png

    Scott



  • @s-molinari Yes, but in the QSelect I am using a model (newSession[column.name]) that is an array (see my first post).

    <q-select
            v-if="Array.isArray(newSession[column.name])"
            clearable
            standout="bg-teal text-white"
            :label="column.label"
            v-model="newSession[column.name]"
            use-input
            use-chips
            multiple
            hide-dropdown-icon
            input-debounce="0"
            new-value-mode="add"
    />


  • My problem is that I want to use different input components according to the different types that newSession[column.name] can have.
    This can be array, number, boolean or string.
    So newSession should still be in object and I want to access its properties dynamically using [] what is actually nothing else than newSession.dynamicpropertyname.



  • Well. I can only tell you what Quasar is expecting.

    Scott



  • @s-molinari I got my full code up as a working example here: https://codesandbox.io/s/codesandbox-app-5hxoc

    When you select a row in the table and then click on the copy-Button, a dialog opens where I want to be able to change any field values. But only when I close the dialog, the changes are applied on the model (see the model output on top of the table). After changing a field and leaving it to switch to the next field, the old value is visible again.

    Everything takes place in the file Index.vue and constants.js for simplicity.
    The model underlying the dialog is ‘newSession’ and the table data is based on ‘data’. On dialog opening I copy the selected row data into a newSession model (see the function openNewSessionDialog()).
    (I mocked the backend request with static as you can see.)



  • Ok. I see the use cases and sort of what you want to do.

    Questions:

    With the select you are trying to build in the dialog entry mask, what data is it supposed to be selecting with/ for? Your code loses me on that.

    I think I understand the copying of the selected session. The idea is to then change parts of it to make a new session and add it to the table data, correct?

    If I can get the answers to those questions, I might be able to help. Maybe. 😁

    Scott



  • To answer your questions:

    With the select you are trying to build in the dialog entry mask, what data is it supposed to be selecting with/ for? Your code loses me on that.

    I am not sure if I got your question. The dialog entry mask is build based on the selected table entry. So I make a transformation from the ‘complicated’ raw model ‘data’ to a simplified model ‘newSession’. In the dialog I want to make changes based on the underlying ‘newSession’ model. And after clicking the save-button, I am transforming the simplified ‘newSession’ model back to the ‘data’ model. (However the transformations are working fine I think. )

    I think I understand the copying of the selected session. The idea is to then change parts of it to make a new session and add it to the table data, correct?

    Yes, that´s 100% correct.

    I hope I could answer your questions and I am glad for your support in this 🙂

    Tony



  • For my first question, you have a QSelect being used in your dialog, which is what you are asking about. What part of the data is that supposed to be showing a selectable and addable selection field in your dialog?

    Scott



  • 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


  • 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



  • 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



  • 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.



  • 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*.



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

    Scott



  • @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.



  • 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.


Log in to reply