Question

我正在学习Vuejs，我正在尝试开发一个表单，当我开始在User.vue中开发此代码时，我的浏览器变为空白：

<template>
  <div class="users">
    <h1>Users</h1>
    <form v-on:submit="addUser">
      <input type="text" v-model="newUser.name" placeholder="Enter Name">
      <br />
      <input type="text" v-model="newUser.email" placeholder="Enter Email">
      <br />
      <input type="submit" value="Submit">
    </form>
    <ul>
      <li vi-for="user in users">
        <input type="checkbox" class="toggle" v-model="user.contacted">
        <span :class="{contacted: user.contacted}">
          {{user.name}}: {{user.email}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'users',
    data() {
      return {
        newUser: {},
        users: [
          {
            name: 'Brad Traversy',
            email: 'techguy@gmail.com',
            contacted: false
          },
          {
          name: 'Hendrik John',
          email: 'hjohn@gmail.com',
          contacted: false
          },
          {
          name: 'Brooke Dukes',
          email: 'bdukes@automattic.com',
          contacted: false
          }
        ]
      }
    },
    methods: {
      addUser: function(e){
        this.users.push({
          name: this.newUser.name,
          email: this.newUser.email,
          contacted: false
        });
        e.preventDefault();
      }
    },
  }
</script>

<style scoped>
  .contacted{
    text-decoration: line-through;
  }
</style>

我似乎无法读取用户数组中属性的未定义属性，但我一直无法弄清楚原因。

Answer 1

这里有简单的语法错误：

<li vi-for="user in users">

应该是

<li v-for="user in users">

FWIW，我希望错误是“无法读取未定义的属性contacted”，这是一个javascript错误，表明user未定义。然后，您只需查看<{1}} 应该定义的位置，以找到您的错误。

获取类型错误无法读取未定义的属性“已联系”和“名称”

1 个答案: