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

Есть такая разметка:
<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() после загрузки форм мне не помогло. Что я не так делаю?
  • Вопрос задан
  • 1906 просмотров
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Вот тут: https://ru.vuejs.org/v2/api/#v-html
Обратите внимание, что содержимое вставляется как обычный HTML — то есть не компилируется как шаблон Vue. Не стоит организовывать вложенные шаблоны с помощью v-html, попробуйте лучше применить компоненты.

Т.е. ваш вариант не будет работать.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы