CODEWITHSUNDEEP
vue.jsdynamicdata-bindingbindingv-model
robert tonnessen
robert tonnessen

Reputation: 39

How to bind to unknown property name at development time

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.

Upvotes: 0

Views: 291

Answers (1)

Riddhi
Riddhi

Reputation: 2244

Try as below 

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

Upvotes: 1

Related Questions