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

下面的代码只是我正在研究的一个示例，我尝试不多次重复

gs输入

组件，只使用从

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>

div（v-for=“索引4”）
gs输入(
label=“From”，
v-bind:prop1=“values.key+index+vals”/
v-bind:prop2=“`values.key${index}vals`”//不起作用
)
从“/GlobalSettingInput”导入GsInput
导出默认值{
名称：'全局设置窗体'，
组件：{GsInput}，
数据（）{
返回{
价值观：{
key1vals:“Val Lorem”，
Key2VAL:“Val Ipsum”，
键3VAL:“Val Dolo”，
键4VAL:“Val Solo”，
}
}
},
}

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

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

---

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

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