如何在 v-for 上分配一个 v-model（来自 bootstrap vue 示例）

Question

我正在使用 vue-bootstrap 使用 v-for 指令创建一些输入字段。我想做的基本上与 this link 中提供的示例相同，但我无法弄清楚如何将我收集的数据获取到 v-model 指令中（我的意思是，从输入中获取数据） .

我可以手动完成并分配每个字段并将其映射到我的对象的 v-model 中，但是如果有更好的方法来解决这个问题那将非常有帮助。

这是几乎完全从示例页面复制的代码 (vue-js)，但我 修改失败（带有注释）：

<template>
  <b-container fluid>
    <code>{{result}}</code>
    <b-row class="my-1" v-for="type in types" :key="type">
      <b-col sm="3">
        <label :for="`type-${type}`">Type {{ type }}:</label>
      </b-col>
      <b-col sm="9">
        <!-- here I modified the v-model part -->
        <b-form-input :id="`type-${type}`" :type="type" :v-model="`result.${type}`"></b-form-input>
      </b-col>
      <!-- here I added the same "v-model" that I placed into the previous line -->
      <p>{{`result.${type}`}}</p>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        // here I placed the result object and I expected to obtain something like this:
        /*
result: {
text: "the text",
password: "the password" 
...
...
}
        */
        result: {},
        types: [
          'text',
          'password',
          'email',
          'number',
          'url',
          'tel',
          'date',
          `time`,
          'range',
          'color'
        ]
      }
    }
  }
</script>

谁能解释一下我做错了什么？我试图在 v-for 语句中找到 "`type-${type}`" 的文档，但找不到。

Answer 1

初始化result为：

result: {
  text: '',
  password:, '',
  email: '',
  number: '',
  url: '',
  tel: '',
  date: '',
  time: '',
  range: '',
  color: ''
}

并且在您的模板和 v-model 中，使用 [] 而不是 . 进行密钥访问，即 result.${type} => result[type].

另请注意 v-model 本身就是一个指令，因此您无需在此处使用 v-bind(:)：

<b-form-input :id="`type-${type}`" :type="type" v-model="result[type]">
</b-form-input>

如何在 v-for 上分配一个 v-model（来自 bootstrap vue 示例）

How to assign a v-model on v-for (from bootstrap vue example)

javascript

vue.js

vuejs2

bootstrap-vue