无法读取 v-for 范围内的组件数据答案

【问题标题】：Cannot read component data within v-for scope无法读取 v-for 范围内的组件数据
【发布时间】：2018-02-04 14:33:25
【问题描述】：

我是 Vue 的新手，我正在努力在 v-for 范围内访问我的组件数据。我使用以下代码收到此错误。

TypeError: 无法读取未定义的属性“whatever” 在评估中

<template>
  <b-row class="my-1" v-for="field in inputFields" :key="field.key">
    <b-col>
      <b-form-input :type="field.type" :placeholder="this.whatever" required>
      </b-form-input> <!-- placeholder ERROR! -->
    </b-col>
  </b-row>
  <b-form-input :placeholder="this.whatever" required>
  </b-form-input> <!-- placeholder OK! -->
</template>

<script>
export default {
  data() {
    return {
      whatever: 'this is a string',
      userShouldSignup: false,
      parameters: {
        email: {
          label: 'Enter email',
          type: 'email',
          value: '',
        },
        password: {
          label: 'Enter password',
          type: 'password',
          value: '',
        },
        confirmPassword: {
          label: 'Confirm password',
          type: 'password',
          value: '',
        },
      },
    }
  },
  computed: {
    inputFields() {
      return this.userShouldSignup ? [
        this.parameters.email,
        this.parameters.password,
        this.parameters.confirmPassword,
      ] : [
        this.parameters.email,
        this.parameters.password,
      ];
    },
  }
};
</script>

如何在v-for 中访问我的数据变量？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

将:placeholder="this.whatever" 更改为:placeholder="whatever"。你不需要在那里使用this，因为 Vue 识别你想要访问它的数据或计算值。这不起作用，因为循环中的this 是别的东西。

看看下面这段代码sn-p（我不得不改变一些东西来重现你的问题）：

var app = new Vue({
  el: '#app',
  data() {
    return {
      whatever: 'this is a string',
      userShouldSignup: false,
      parameters: {
        email: {
          label: 'Enter email',
          type: 'email',
          value: '',
        },
        password: {
          label: 'Enter password',
          type: 'password',
          value: '',
        },
        confirmPassword: {
          label: 'Confirm password',
          type: 'password',
          value: '',
        },
      },
    }
  },
  computed: {
    inputFields() {
      return this.userShouldSignup ? [
        this.parameters.email,
        this.parameters.password,
        this.parameters.confirmPassword,
      ] : [
        this.parameters.email,
        this.parameters.password,
      ];
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <div class="my-1" v-for="field in inputFields" :key="field.key">
    <div>
      <input type="text" :placeholder="whatever" required/>
    </div>
  </div>
  <input :placeholder="whatever" required/>
</div>

【讨论】：

【解决方案2】：

它不起作用，因为“this”指向“field”（循环），而“field”没有“whatever”变量。

您只需要删除“this”关键字。从“数据”访问变量时根本不需要它

【讨论】：