Vue template compilation failed while parsing file

189
16 мая 2018, 06:50

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

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)

READ ALSO
Вопрос по fancybox (js альбом)

Вопрос по fancybox (js альбом)

Поставил fancybox, чтобы был нормальный фотоальбомТак вот, я использовал data-caption="", и у меня отображается все слево (некрасивое описание получается)

193
Использование vue.js в landing page

Использование vue.js в landing page

Всем приветУже написал пару простых SPA на vue

670
JSON данные обработка на Jquery и вывод в HTML

JSON данные обработка на Jquery и вывод в HTML

Проблема в том, что не получается из функции, которая принимает данные, взять и обработать данные пользователейПрошу помочь и подробно рассказать,...

214
Как вызвать JavaScript в скрипте Python?

Как вызвать JavaScript в скрипте Python?

Есть плата (raspberry pi3), к цифровым входам которой прицеплена кнопка

211