0

The following correctly binds to a property on my model

      <v-checkbox
        v-if="header.dataType === 'Toggle'"
        v-model="myprops.item.superColumn"
        @change="onChanged(myprops.item)"
      ></v-checkbox>

as does this

      <v-checkbox
        v-if="header.dataType === 'Toggle'"
        v-model="myprops.item['superColumn']"
        @change="onChanged(myprops.item)"
      ></v-checkbox>

but both of these require that I know the name of the property at development time, which I do not.

The following does not work

      <v-checkbox
        v-if="header.dataType === 'Toggle'"
        v-model="myprops.item[header.columnName]"
        @change="onChanged(myprops.item)"
      ></v-checkbox>

header.columnName is a string and exists as I can use it for other properties on the checkbox such as a hint or an id.

any thoughts? I'm new to vue.js, javascript, the web.

robert tonnessen
  • 39
  • 5
  • 1
    There is nothing wrong with what you are doing. Even the third syntax should work. See the Codepen for more details: https://codepen.io/anon/pen/zeEmLa?editors=1010#anon-login Ensure that you have properly set `columnName`. – Harshal Patil Feb 06 '19 at 10:52
  • These are all valid JS syntaxes. If one syntax works, so should others. – Harshal Patil Feb 06 '19 at 10:53
  • The third example definitely does not work for me; I created a function to see what's happening and the result of myprops.item[header.columnName] is the boolean value that the myprops.item's property is holding; not the property name. – robert tonnessen Feb 06 '19 at 12:36

1 Answers1

1

Try as below 

<v-checkbox
        v-if="header.dataType === 'Toggle'"
        v-model="myprops.item[''+header['columnName']]"
        @change="onChanged(myprops.item)"
      ></v-checkbox>
Riddhi
  • 2,174
  • 1
  • 9
  • 17
  • This works, Thank you. Could you provide me a link or a term to google for this type of access? – robert tonnessen Feb 06 '19 at 10:46
  • Well that's a javascript concept i just converted the value to the string by appending it to empty quotes so your value can be accessed. – Riddhi Feb 06 '19 at 10:52
  • You can edit your question title with some tags like dynamic bindings to v-model and kindly accept the answer so the question is closed and it may be helpful to others too. – Riddhi Feb 06 '19 at 11:10