如何在与数据连接时从 v-for v-bind 索引？

Question

下面的代码只是我正在处理的示例，我试图不多次重复 gs-input 组件，而只是使用我从 v-for 获得的 index 和让 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>

Answer 1

我认为这是因为您需要使用数组而不是点语法来访问值：

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

如何在与数据连接时从 v-for v-bind 索引？

How to v-bind index from v-for while concatenate with data?

javascript

vue.js

vuejs2

v-for