Как v-bind индекс из v-for при объединении с данными? - PullRequest
Новая
       8

Как v-bind индекс из v-for при объединении с данными?

0 голосов
/ 06 июня 2018

Ниже код является лишь примером того, над чем я работаю, я пытаюсь не повторять gs-input компонент несколько раз и просто использовать index, который я получаю из v-for и заставить v-bind работать: 

<template lang="pug">
  div(v-for="index in 4")
    gs-input(
      label="From",
      v-bind:prop1="values.key + index + vals" // Does not work
      v-bind:prop2="`values.key${index}vals`"  // Does not work
    )
</template>

<script>
import GsInput from './GlobalSettingInput'

export default {
  name: 'global-settings-form',
  components: { GsInput },
  data() {
    return {
      values: {
        key1vals: 'Val Lorem',
        key2vals: 'Val Ipsum',
        key3vals: 'Val Dolo',
        key4vals: 'Val Solo',
      }
    }
  },
}
</script>

1 Ответ

0 голосов
/ 06 июня 2018

Я думаю, это потому, что вам нужно использовать массив вместо точечного синтаксиса для доступа к значениям: 

gs-input(
  label="From",
  v-bind:prop1="values['key' + index + 'vals']" // Does work
  v-bind:prop2="values[`key${index}vals`]"  // Does work
)
...