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

我正在尝试使用Vue将html、js、css文件转换为单个文件组件。我已经定义了表单“logininfo”，但命令行中出现一条错误消息，表示“logininfo”未定义。因此，我无法检查登录表单是否正常工作。我已经在表单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. ");
        }
     }
}}

电邮：
密码：
登录
导出默认值{
名称：“登录信息”，
数据（）{
电邮：“，
密码：“
},
方法：{
登录：函数（）{
var account=JSON.parse（localStorage.getItem（'userdetails'））.find（函数（userdetails）{
返回（logininfo.email===userdetails.email&&logininfo.password===userdetails.password）？userdetails:null；
});
如果（账户）{
window.location.href=“index.html？email=“+account.email；
}否则{
警报（“未识别电子邮件”）；
}
}
}}

---

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

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;
});

---

谢谢你的帮助。它表示无法读取未定义的属性“email”。但是我已经定义了它。啊，错过了嵌套函数。您需要保留对对象的引用才能访问属性。我更新了答案。刷新-我的更新被覆盖，我必须重新更新<代码>var self=此然后在函数中，

self.email

我是否需要定义一个值，因为它表示无法读取null的属性“find”。非常感谢您提供的所有帮助。这是一个单独的问题，您可能打算使用

window.localStorage

，这就是

getItem

的返回值为空且

find

未定义的原因。