Есть такая разметка:
<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() после загрузки форм мне не помогло. Что я не так делаю?
Средний
