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

Question

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

TypeError: Cannot read property 'whatever' of undefined at eval

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

Answer 1

将 :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>