#vue.js
Вопрос:
я выполняю вход в систему в vue 3
все работает до части css, когда я ставлю js, он выдает мне бесконечные ошибки и не загружает страницу в vue.
это html — код
Войти.vue
lt;templategt; lt;div class="container"gt; lt;div class="forms-container"gt; lt;div class="signin-signup"gt; lt;form action="#" class="sign-in-form"gt; lt;h2 class="title"gt;Sign inlt;/h2gt; lt;div class="input-field"gt; lt;i class="fas fa-user"gt;lt;/igt; lt;input type="text" placeholder="Username" /gt; lt;/divgt; lt;div class="input-field"gt; lt;i class="fas fa-lock"gt;lt;/igt; lt;input type="password" placeholder="Password" /gt; lt;/divgt; lt;input type="submit" value="Login" class="btn solid" /gt; lt;p class="social-text"gt;Or Sign in with social platformslt;/pgt; lt;div class="social-media"gt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-facebook-f"gt;lt;/igt; lt;/agt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-twitter"gt;lt;/igt; lt;/agt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-google"gt;lt;/igt; lt;/agt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-linkedin-in"gt;lt;/igt; lt;/agt; lt;/divgt; lt;/formgt; lt;form action="#" class="sign-up-form"gt; lt;h2 class="title"gt;Sign uplt;/h2gt; lt;div class="input-field"gt; lt;i class="fas fa-user"gt;lt;/igt; lt;input type="text" placeholder="Username" /gt; lt;/divgt; lt;div class="input-field"gt; lt;i class="fas fa-envelope"gt;lt;/igt; lt;input type="email" placeholder="Email" /gt; lt;/divgt; lt;div class="input-field"gt; lt;i class="fas fa-lock"gt;lt;/igt; lt;input type="password" placeholder="Password" /gt; lt;/divgt; lt;input type="submit" class="btn" value="Sign up" /gt; lt;p class="social-text"gt;Or Sign up with social platformslt;/pgt; lt;div class="social-media"gt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-facebook-f"gt;lt;/igt; lt;/agt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-twitter"gt;lt;/igt; lt;/agt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-google"gt;lt;/igt; lt;/agt; lt;a href="#" class="social-icon"gt; lt;i class="fab fa-linkedin-in"gt;lt;/igt; lt;/agt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/divgt; lt;div class="panels-container"gt; lt;div class="panel left-panel"gt; lt;div class="content"gt; lt;h3gt;New here ?lt;/h3gt; lt;pgt; Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, ex ratione. Aliquid! lt;/pgt; lt;button class="btn transparent" id="sign-up-btn"gt; Sign up lt;/buttongt; lt;/divgt; lt;img src="../../src/dist/img/log.svg" class="image" alt="" /gt; lt;/divgt; lt;div class="panel right-panel"gt; lt;div class="content"gt; lt;h3gt;One of us ?lt;/h3gt; lt;pgt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum laboriosam ad deleniti. lt;/pgt; lt;button class="btn transparent" id="sign-in-btn"gt; Sign in lt;/buttongt; lt;/divgt; lt;img src="../../src/dist/img/register.svg" class="image" alt="" /gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/templategt; lt;style scopedgt; @import url('https://kit.fontawesome.com/64d58efce2.js'); @import '../../src/plugins/Login/style.css'; lt;/stylegt; app.js
const sign_in_btn = document.querySelector("#sign-in-btn"); const sign_up_btn = document.querySelector("#sign-up-btn"); const container = document.querySelector(".container"); sign_up_btn.addEventListener("click", () =gt; { container.classList.add("sign-up-mode"); }); sign_in_btn.addEventListener("click", () =gt; { container.classList.remove("sign-up-mode"); }); и поэтому я связываю js с приложением vue.
main.js
import { createApp } from 'vue' import App from './App.vue' import router from './router' import '../src/plugins/Login/app.js' createApp(App).use(router).mount('#app') это ошибка, которую я получаю
как я мог это исправить, чтобы заставить логин, по крайней мере, часть css и js работать правильно, а затем реализовать логику, лежащую в его основе?
Ответ №1:
Может быть, вы можете попробовать использовать vue в шаблоне:
lt;button @click="toggleClass" class="btn transparent" :class="signUp amp;amp; 'sign-up-mode'" id="sign-up-btn"gt; Sign up lt;/buttongt; lt;button @click="toggleClass(false)" class="btn transparent" id="sign-in-btn"gt; Sign in lt;/buttongt; и в скрипте с API опций:
data() { return { signUp: false } } methods: { toggleClass(type = true) { this.signUp = type } } или с помощью API композиции:
import { ref } from "@vue/reactivity"; setup() { const signUp = ref(false) const toggleClass = (type = true) =gt; { signUp.value = type } return { signup, toggleClass } }