The code run
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<!--javascript extensions-->
<script src='../static/js/vue.min.js'></script>
<script src='../static/js/axios.min.js'></script>
<script src="../static/js/jquery-3.6.1.min.js"></script>
<!--Css-->
<link rel="stylesheet" href='../static/css/home.css'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<!--Bootstrap 5-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="register">
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<form method="post">
{% csrf_token %}
<a href="{% url 'home' %}">
<h2 class="text-center mb-4" style="text-decoration: none; color: black; font-size:2em;">
MoHome
</h2>
</a>
<div class="mb-3">
<label for="username" class="form-label">User Name</label>
<input v-bind:value="username" type="text" class="form-control" id="username" required="required">
</div>
<h3>{[ 10/2 ]}</h3>
<div class="mb-3">
<label for="firstname" class="form-label">First Name</label>
<input v-bind:value="firstname" type="text" class="form-control" id="firstname" required="required">
</div>
<div class="mb-3">
<label for="lastname" class="form-label">Last Name</label>
<input v-bind:value="lastname" type="text" class="form-control" id="lastname" required="required">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input v-bind:value="email" type="email" class="form-control" id="email" required="required">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input v-bind:value="password" type="password" class="form-control" id="password" required="required">
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input v-bind:value="confirmPassword" type="password" class="form-control" id="confirmPassword", required="required">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary" v-on:click="register">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var register = new Vue({
el: '#register',
data: {
firstname: "",
lastname: "",
username: "",
email: "",
password: "",
confirmPassword: "",
},
methods: {
register: function (){
console.log("register start");
if (this.password !== this.confirmPassword) {
alert("The Password IS DIFFERENT THAN CONFIRM PASSWORD!");
} else {
const data = {
firstname: this.firstname,
lastname: this.lastname,
username: this.username,
email: this.email,
password: this.password,
confirmPassword: this.confirmPassword
}
axios.post("/register", data)
.then(res => {
console.log(res);
})
.catch(error => {
console.log(error);
})
}
}
},
delimiters: ["{[", "]}"],
}
).$mount("#register")
</script>
</html>我已经尽我所能检查我的代码，甚至使用ChatGpt来帮助我。我也检查了Vue.js文件的路径。还有另外两个Vue.js的HTML文件已经成功地与我的django一起工作。请，我找不到我的代码的问题，即使我与我的其他成功的Vue.js的HTML文件进行了比较。顺便说一下，我已经将输入标签〈〉从v-model更改为v-bind:value，但它仍然不起作用。{[ 10 / 5 ]}的结果仍然显示{[ 10 / 5 ]}，而不是2。因此，它揭示了Vue.js无法成功工作。请帮助我！
1条答案
按热度按时间jfewjypa1#
在
id="confirmPassword",后面有一个不必要的逗号，它会产生一个解析错误。