0

Все из-за того что к главному скрипту я подключаю сразу несколько компонентов. К примеру:

import Sidebar from '../sidebar.vue'

import Widget from'../widget.vue'

То есть в любом случае не получается подключить много компонентов

import Vue from '../node_modules/vue/dist/vue.js'
import login from '../components/login.vue'
import settings from '../components/settings.vue'

Vue.component('login', login)

new Vue({
	el: '#app',
	data: {
		user: {
          mail : '',
          password : '',
          name : '',
        }
	},
	components: {
		'login': login
	}

}) 

/* LOGIN COMPONENT */

<template>
	<div class="col-lg-4 col-md-6 col-sm-7 left_content">
		<h3>Meet your love<br>Where you did<br>not expect</h3>
		<form id="form" action="settings.html" v-on:submit="validateForm">
			<input type="text" v-model="user.mail"
			v-bind:class="{ 'is-invalid': attemptSubmit && missingMail }"
			 
			 placeholder="Email" name="">
			<input type="text" v-model="user.password" 
			v-bind:class="{ 'is-invalid': attemptSubmit && missingPassword }" placeholder="Password"  name="">
			
			<a href="register_page.html" class="register_btn ">Don't have an account yet?</a>
			<input type="submit" class="submit_btn" value="Sign in">

			<div class="form_link">
				<a href="#">Terms</a>
				<a href="#">Privacy Policy & Safety</a>
			</div>
		</form>
	</div>
</template>
<script >
	module.exports = {
		data: function(){
		return{
			user: {
          		mail : '',
          		password : '',
          		name : '', 
        	},
				hello: '',
		 		attemptSubmit: false
			}

		},
		computed: {
			missingMail: function () { 
				if(this.user.mail != "test" || this.user.mail == "test"){
					this.attemptSubmit = true;
					return true; 
				}
			},
		    missingPassword: function () {
		    	if(this.user.password != "test" || this.user.password == ""){
		      		return true;
		    	}
		    }
		},
		methods: {
			
	      	validateForm: function (event) {
				if (this.user.mail == "test" && this.user.password == "test") {
					alert('Success');
			    	this.attemptSubmit = true;
			    	
				}else if ( this.missingMail || this.missingPassword){
					event.preventDefault();
					alert('Fill in form');
				}else if (this.user.mail != "test" || this.user.password != "test") {
					alert('E-mail or password are incorrect');
					event.preventDefault();

				}
		    }

		},
	}

</script>

/* SETTINGS COMPONENT */
<template>

	<div class="col-lg-3 col-md-5 col-sm-5 settings_block">
		
		<div class="settings_title">
			<h4>Settings</h4>
			<img src="img/member4.jpg">
		</div>	
		<div class="user_info">
			<div class="user_avatar">
				<img src="img/section_bg.jpg">
				<div class="online_circle"></div>
			</div>
			<h4>John Larckin</h4>
			<a href="#">
				<img src="img/cam.svg" class="svg">
			</a>
		</div>
		<div class="tag_toggler">
			<div class="icon">
				<img src="img/options.svg" class="svg">
			</div>
			<h4>Select tag</h4>
			<div class="checkbox_block">
				<label class="switch">
				  <input type="checkbox">
				  <span class="slider round"></span>
				</label>
			</div>	
		</div>
		<div class="description">
			<p> Something about you </p>
			<p> John Larckin </p>
		</div>
		<div class="content_toggler">
			<div class="content_toggler_item">
				<a href="chat.html">
					<img src="img/chat.svg" class="svg">
				</a>
			</div>
			<div class="content_toggler_item">
				<a href="map.html">
					<img src="img/layers.svg" class="svg">
				</a>
			</div>
			<div class="content_toggler_item active">
				<a href="settings.html">
					<img src="img/social.svg" class="svg">
				</a>
			</div>
		</div>	
	</div>
	<div class="add_room_btn">
		<a href="create_room.html">
			<img src="img/signs.svg" class="svg">
		</a>
	</div>
	<div class="google_map" id="map"></div>

</template>
<script>
	
</script>

Полный текст ошибки: Vue template compilation failed while parsing file: D:\vizumia_messenger\components\settings.vue at compileTemplate (D:\vizumia_messenger\node_modules\vueify\lib\template-compiler.js:11:11) at D:\vizumia_messenger\node_modules\vueify\lib\compiler.js:243:24 at at process._tickCallback (internal/process/next_tick.js:188:7)

3
  • приведите полный текст ошибки
    – etki
    13 мая 2018 в 6:12
  • Сейчас, спасибо.
    – Bekzod
    13 мая 2018 в 6:13
  • Можете посмотреть, пожалуйста?
    – Bekzod
    13 мая 2018 в 6:16

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.