javascript - 无法在v-for范围内读取组件数据

我只是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中访问我的数据变量？

最佳答案

将:placeholder="this.whatever"更改为:placeholder="whatever"。您不需要在那里使用this，因为Vue会识别您要访问其数据或计算值。这是行不通的，因为循环中的this是另一回事。

请看下面的代码片段（我不得不更改一些内容来重现您的问题）：

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>