Как привязать к неизвестному имени свойства во время разработки

Следующее правильно привязывается к свойству моей модели

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

как и это

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

но оба они требуют, чтобы я знал имя свойства во время разработки, чего я не знаю.

Следующее не работает

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

header.columnName представляет собой строку и существует, поскольку я могу использовать ее для других свойств флажка, таких как подсказка или идентификатор.

Какие-нибудь мысли? Я новичок в vue.js, javascript, сети.


dynamic binding data-binding vue.js v-model
person robert tonnessen    schedule 06.02.2019    source источник
comment
В том, что вы делаете, нет ничего плохого. Даже третий синтаксис должен работать. Дополнительные сведения см. в Codepen: codepen.io/anon/pen/zeEmLa. ?editors=1010#anon-login Убедитесь, что вы правильно установили columnName.   -  person Harshal Patil    schedule 06.02.2019
comment
Это все допустимые синтаксисы JS. Если работает один синтаксис, должны работать и другие.   -  person Harshal Patil    schedule 06.02.2019
comment
Третий пример определенно не работает для меня; Я создал функцию, чтобы увидеть, что происходит, и результатом myprops.item[header.columnName] является логическое значение, которое хранится в свойстве myprops.item; не имя свойства.   -  person robert tonnessen    schedule 06.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте, как показано ниже

<v-checkbox
        v-if="header.dataType === 'Toggle'"
        v-model="myprops.item[''+header['columnName']]"
        @change="onChanged(myprops.item)"
      ></v-checkbox>
person Riddhi    schedule 06.02.2019
comment
Это работает, спасибо. Не могли бы вы предоставить мне ссылку или термин в Google для этого типа доступа? - person robert tonnessen; 06.02.2019
comment
Что ж, это концепция javascript, я просто преобразовал значение в строку, добавив его в пустые кавычки, чтобы можно было получить доступ к вашему значению. - person Riddhi; 06.02.2019
comment
Вы можете отредактировать заголовок своего вопроса с помощью некоторых тегов, таких как динамические привязки к v-модели, и любезно принять ответ, чтобы вопрос был закрыт, и он может быть полезен и другим. - person Riddhi; 06.02.2019