如何使用vue将html、js、css文件转换为SFC

Question

我正在尝试使用Vue将html、js、css文件转换为单个文件组件。我已经定义了"logininfo"的形式，但命令行中出现一条错误消息，说"loginfo"未定义。所以我无法检查登录表单是否正常工作。我已经在表单id中定义了"logininfo"，当我在脚本文件中导出它时。

<template>
<div id="login">
<form id="logininfo" method="POST"  @submit.prevent="onsubmit">
Email: <input v-model="email" type="email">
Password: <input v-model="password" type="password">
<button v-on:click="login" id="login">Login </button> 
</form>
</div>
</template>
<script>
export default {
name: ‘logininfo’,
data() {
email: "",
password: ""
},
methods: {
login: function () {
var account = JSON.parse(localStorage.getItem('userdetails')).find(function(userdetails) {
return (logininfo.email === userdetails.email && logininfo.password === userdetails.password) ? userdetails : null;
});
if(account) {
window.location.href = "index.html?email=" + account.email;
} else {
alert("Email has not been identified. ");
}
}
}}

Answer 1

由于您在嵌套函数中引用组件数据，因此需要保留对对象的作用域引用。

function () {
var self = this;
var account = JSON.parse(localStorage.getItem('userdetails')).find(function(userdetails) {
return (self.email === userdetails.email && self.password === userdetails.password) ? userdetails : null;
});