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

我刚刚接触Vue，正在努力在

v-for

范围内访问我的组件数据。我使用以下代码得到这个错误

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

导出默认值{
数据（）{
返回{
不管怎样：'这是一个字符串'，
userShouldSignup:false，
参数：{
电邮：{
标签：“输入电子邮件”，
键入：“电子邮件”，
值：“”，
},
密码：{
标签：“输入密码”，
键入：“密码”，
值：“”，
},
确认密码：{
标签：“确认密码”，
键入：“密码”，
值：“”，
},
},
}
},
计算：{
输入字段（）{
返回此。用户是否应该注册[
这个.parameters.email，
此.parameters.password，
this.parameters.confirmPassword，
] : [
这个.parameters.email，
此.parameters.password，
];
},
}
};

如何访问

v-for

中的数据变量？

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

你只需要删除“this”关键字。从“数据”访问变量时根本不需要它，因为“this”指向“field”（循环），而“field”没有“whatever”变量，所以它不起作用

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

：placeholder=“this.which”

更改为

：placeholder=“which”

。您不需要在此处使用

此

，因为Vue可以识别您想要访问其数据或计算值。这不起作用，因为循环中的这个是另一回事

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

var-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
不管怎样：'这是一个字符串'，
userShouldSignup:false，
参数：{
电邮：{
标签：“输入电子邮件”，
键入：“电子邮件”，
值：“”，
},
密码：{
标签：“输入密码”，
键入：“密码”，
值：“”，
},
确认密码：{
标签：“确认密码”，
键入：“密码”，
值：“”，
},
},
}
},
计算：{
输入字段（）{
返回此。用户是否应该注册[
这个.parameters.email，
此.parameters.password，
this.parameters.confirmPassword，
] : [
这个.parameters.email，
此.parameters.password，
];
},
}
});

将
：placeholder=“this.which”
更改为
：placeholder=“which”
。您不需要在此处使用
此
，因为Vue可以识别您想要访问其数据或计算值。这不起作用，因为循环中的这个

是另一回事

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

var-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
不管怎样：'这是一个字符串'，
userShouldSignup:false，
参数：{
电邮：{
标签：“输入电子邮件”，
键入：“电子邮件”，
值：“”，
},
密码：{
标签：“输入密码”，
键入：“密码”，
值：“”，
},
确认密码：{
标签：“确认密码”，
键入：“密码”，
值：“”，
},
},
}
},
计算：{
输入字段（）{
返回此。用户是否应该注册[
这个.parameters.email，
此.parameters.password，
this.parameters.confirmPassword，
] : [
这个.parameters.email，
此.parameters.password，
];
},
}
});


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