Question

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

TypeError：无法读取属性＆＃39;无论什么＆＃39;未定义的在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

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

您只需要删除“this”关键字即可。从“数据”

访问变量时，根本不需要它

Answer 2

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

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

2 个答案: