Vue.js在HTML中无法与Django一起工作，请帮助我

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无法成功工作。请帮助我！

Vue.js在HTML中无法与Django一起工作，请帮助我

1条答案

相关问题

热门标签

最新问答