Vue：数据中的每个对象都是未定义的

Question

代码 ->

<div>    
    <h2>Login</h2>    
      <div class="submit-form">
        <div class="form-group">
    <label for="email">Title</label>
    <input
      type="text"
      class="form-control"
      id="email"
      required
      v-model="user.email"
      name="email"
    />
  </div>

  <div class="form-group">
    <label for="password">Description</label>
    <input
      class="form-control"
      id="password"
      required
      v-model="user.password"
      name="password"
    />
  </div>
        <button @click="login1">Login</button>
    </div>
</div>

脚本 ->

<script>
import router from "../router"    
import http from "../http-common"    
export default {    
    data() {
        return {
                  user: {
    email: "", 
    password: ""
  }
        };
    },  
    methods: {    
        login1: () => {
            console.log(this.user.email);
        }  
    }    
}
</script>

在 login1 函数中，它的控制台日志未定义。这个项目是使用 vue-router 和最新版本的 vue 制作的。似乎数据 returns 只是未定义。 P.S: 对于这样的问题我很抱歉，我是新手。 :)

Answer 1

问题是您使用的 arrow-function 阻止 this 引用 Vue 组件：

new Vue({
  el:"#app",
  data() {
    return {
      user: {
        email: "", 
        password: ""
      }
    };
  },  
  methods: {    
    login1: function() {
      console.log(this.user);
    }  
  }   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">    
  <h2>Login</h2>    
  <div class="submit-form">
    <div class="form-group">
      <label for="email">Title</label>
      <input
        type="text"
        class="form-control"
        id="email"
        required
        v-model="user.email"
        name="email"
      />
    </div>
    <div class="form-group">
      <label for="password">Description</label>
      <input
        class="form-control"
        id="password"
        required
        v-model="user.password"
        name="password"
      />
    </div>
    <button @click="login1">Login</button>
  </div>
</div>

Answer 2

'this' 不能在箭头函数中引用，因为

Arrow functions 执行词法绑定并使用周围范围作为this

的范围

所以你需要删除像

这样的箭头定义

methods: {    
        login1() {
            console.log(this.user.email);
        }  
    }

Vue：数据中的每个对象都是未定义的

Vue: every object in data is undefined

vue.js

vue-router

v-model