英文:
Vue.js does't work in HTML with Django, please assist me
问题
以下是您要翻译的代码部分：
<!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>
希望这可以帮助您找到问题所在。如果还有其他问题，请随时提出。
英文:
Here is the code:
<!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>
I had check my code as best as I can and even use ChatGpt to assit me. Also I had check my path of the Vue.js file. And there are other two HTML file with Vue.js that have successfully work with my django. Please, I couldn't find the problem of my code even I had compared with my other successed HTML file with Vue.js. By the way, I had changed the input tag<> from v-model to v-bind:value but it still doesn't work. The result of {[ 10 / 5 ]} is still showing {[ 10 / 5 ]}, not 2 instead. Thus, it has reveal that the Vue.js doesn't work successfully. Please help me!
答案1
得分: 0
After id="confirmPassword", you have an unnecessary comma that generates a parsing error.
英文:
After id="confirmPassword", you have an unnecessary comma that generates a parsing error.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论