Как в Vue произвести перерендеринг после загрузки шаблона в компоненте?

Question

[Максим Медведев]

Есть такая разметка:

<script src="/assets/js/vue/vue.js" type="text/javascript"></script>
		<script src="/assets/js/vue/vue-router.js" type="text/javascript"></script>
		<script src="/assets/js/vue/axios.js" type="text/javascript"></script>
		<script src="/assets/js/page/auth.js" type="text/javascript"></script>

<div id="appAuth">
					<router-view></router-view>

					<div class="bottom-wrapper" v-bind:class="{ hidden: stay=='restore' }">
					        <router-link to="/restore">восстановить пароль</router-link>.
					</div>

					<div class="bottom-wrapper" v-bind:class="{ hidden: stay=='auth' }">
				            <router-link to="/auth">авторизация</router-link>.
				    </div>

				</div>

и такой скрипт:

const auth = {
	props: ['name'],
	template: '<div v-html="html_block"></div>',
	data: function () {
		return {
	      html_block: null
	    }
	},
	created () {
		// запрашиваем данные когда реактивное представление уже создано
		this.fetchData();
	},
	watch: {
		// в случае изменения маршрута запрашиваем данные вновь
		'$route': 'fetchData',
	},
	methods: {
		fetchData () {

			axios.get('/auth.php?do='+this.name).then( (response) => {
		        this.html_block = response.data.html;
		        app.stay = this.name;
		    });

		},

	}
};

const routes = 	[
	{ path: '*', component: auth, props: { name: 'auth' } },
	{ path: '/auth', component: auth, props: { name: 'auth' } },
	{ path: '/restore', component: auth, props: { name: 'restore' } }
];

const router = new VueRouter({
	mode: 'history',
	routes
});

const app = new Vue({
	delimiters: ['<%', '%>'],
	data: function () {
		return {
			stay: "auth"
		}
	},
	methods: {

	},
	router
}).$mount('#appAuth');

Я пытаюсь разобраться с vue.js и для начала пробую сделать страницу, на которой присутствует на старте форма авторизации, под ней ссылка на восстановление пароля. формы восстановления пароля и авторизации я загружаю через axios. Проблема с которой столкнулся: при загрузке этих форм мне не удается навесить на них события v-on:submit. Изначально блоки bottom-wrapper тоже были в этих загружаемых формах, но нажатия на ссылки и роутинг не срабатывали.
app .$forceUpdate() после загрузки форм мне не помогло. Что я не так делаю?

Answer 1

[Evgeny Kulakov]

Вот тут: https://ru.vuejs.org/v2/api/#v-html

Обратите внимание, что содержимое вставляется как обычный HTML — то есть не компилируется как шаблон Vue. Не стоит организовывать вложенные шаблоны с помощью v-html, попробуйте лучше применить компоненты.

Т.е. ваш вариант не будет работать.

Comments

[Максим Медведев]

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

[Evgeny Kulakov]

Максим Медведев, варианты:
1. Создать соответствующие компоненты и включить их в сборку
2. Если нужен минимальный размер бандла, то делать асинхронную загрузку компонентов.
3. Принимать json с описанием полей и передавать в компонент который их будет нужным образом отображать или использовать рендер функцию.
Наверное есть еще что-то.

[Максим Медведев]

Evgeny Kulakov,
Я пытаюсь сделать по первому варианту. Если переписать мой исходный вариант в виде компонента, то ничего не меняется. Можете привести пример, как правильно это сделать?

[Evgeny Kulakov]

Максим Медведев, не очень понятно, что вы хотите сделать. Сделайте компонент с формой авторизации, укажите в его шаблоне поля.. все что нужно. При переходе по указанному в роутере пути, он будет отображаться. Зачем тянуть кусок html c бэка я не понял..

[Максим Медведев]

Evgeny Kulakov, я думал над таким вариантом, можно вывести в шаблон форму авторизации и сброса пароля, но это пока всего две формы, в последующем нужно будет добавлять функционал и далее уже будут загружаться профиль пользователя, доп страницы, а значит там уже нужно будет на бекенде какие то данные обрабатывать. в итоге сохранять в один шаблон все загружаемые куски html мне кажется не лучший вариант.

[Максим Медведев]

Evgeny Kulakov,

const auth = Vue.component('auth-component', {
props: ['act', 'form'],
template: '<div class="main-content">{{ form }}</div>',
created () {
	this.fetchData();
},
watch: {
	'$route': 'fetchData',
},
methods: {
	fetchData () {
		axios.get('/auth.php?outside=1&do='+this.act).then( (response) => {
	        this.form = response.data.html;
	    });
	},

}
});

const router = new VueRouter({
mode: 'history',
routes: [
	{ path: '*', component: auth, props: { act: 'auth' } },
	{ path: '/auth', component: auth, props: { act: 'auth' } },
	{ path: '/restore', component: auth, props: { act: 'restore' } }
]
});

const app = new Vue({
delimiters: ['<%', '%>'],
router
}).$mount('#appAuth');

<div id="appAuth">
				<auth-component></auth-component>
			</div>

[Evgeny Kulakov]

Максим Медведев, тут надо понять что вы хотите, или это СПА будет или все-таки серверный рендеринг, с частиным использованием vue. При СПА весь обмен у вас будет через api, т.е. вы будете только обмениваться данными, все компоненты у вас будут на клиенте или будут при необходимости подгружаться.

[Максим Медведев]

Evgeny Kulakov,

<div id="appAuth">
	<router-view></router-view>
</div>

На текущий момент задача - только та, которую пытаюсь решить. СПА, апи, я про них не писал ничего.

Я попробовал убрать загрузку через axios форм и перенести их в общий шаблон. в параметр template компонента я не могу сохранить их, так как мне для них еще нужен перевод на язык пользователя. Оба компонента теперь имеют такой вид:

template: '<div class="content">'+$(".auth-comp").html()+'</div>',

.auth-comp - скрытый блок на странице, в нем форма уже с нужным переводом. Есть какой то способ в vue в компонент положить свой шаблон, чтобы потом с ним работать? Вопрос только этот, ничего другого.

[Evgeny Kulakov]

Максим Медведев, можно использовать Vue.compile для динамической компиляции шаблона. Вот пример: https://jsfiddle.net/Linusborg/1zdzu7k1/

[Максим Медведев]

да, видел её. пока сделал проще, на основе