#javascript #vue.js #vuejs2
Вопрос:
мы работаем с внедрением динамических компонентов с помощью ответа сервера, но как только пользователь одобрит шаг, мы не позволим ему вернуться к шагам, которые он уже одобрил.
HTML
<div id="app">
<div>
<form-wizard @on-complete="onComplete">
<tab-content v-for="tab in tabs"
v-if="!tab.hide"
:key="tab.title"
:title="tab.title"
:icon="tab.icon">
<component :is="tab.component"></component>
</tab-content>
</form-wizard>
</div>
</div>
JS
Vue.use(VueFormWizard)
Vue.component('step1', {
template:` <div> My first tab content <br>
</div>`
}
)
Vue.component('step2', {
template:`<div> My second tab content </div>`
})
Vue.component('step3', {
template:`<div> My third tab content </div>`
})
Vue.component('step4', {
template:`<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
el: '#app',
data() {
return {
tabs: [{title: 'Personal details', icon: 'ti-user', component: 'step1'},
{title: 'Is Logged In?', icon: 'ti-settings', component: 'step2', hide: false},
{title: 'Additional Info', icon: 'ti-location-pin', component: 'step3'},
{title: 'Last step', icon: 'ti-check', component: 'step4'},
],
}
},
methods: {
onComplete: function(){
alert('Yay. Done!');
}
}
})
но мы не нашли ответов в документации, если вдруг у кого-то возникла эта проблема и он может рассказать нам, как ее решить, я был бы признателен, спасибо.
Комментарии:
1. Я считаю, что это то, за что отвечают validate-on-back и on-validate.
2. @EstusFlask спасибо, вы и мы стараемся :validateOnBack=»правда», но не работает или мы привыкли, но?
3. А как насчет проверки на месте?
4. @EstusFlask мы не используем, только перед тем, как изменить на вкладке и проверить возврат на мастере
5. Это хорошая причина, чтобы начать это делать. Я упомянул их обоих вместе.
Ответ №1:
Как только пользователь одобрит шаг, мы не позволим ему вернуться к шагам, которые он уже одобрил.
Подтвердите переход вперед, а затем просто снимите кнопку «Назад».
Я провел несколько тестов , и переключатель beforeTabSwitch не срабатывает, если двигаться назад props.prevTab() , как жаль, что вы могли бы сделать это в вызове проверки.
Вот пример, который проверяет переход вперед и удаляет предыдущую кнопку и предотвращает навигацию по заголовку (шаг мастера).
Vue.use(VueFormWizard)
Vue.component('step1', {
template: ` <div> My first tab content</div>`,
data: () => ({
name: ''
}),
methods: {
validate() {
// change `true` to things checked on model, beyond scope of question
this.$emit('on-validate', this.$data, true)
return true
}
}
})
Vue.component('step2', {
template: `<div> My second tab content </div>`,
data: () => ({
logged_in_yada: ''
}),
methods: {
validate() {
this.$emit('on-validate', this.$data, true)
return true
}
}
})
Vue.component('step3', {
template: `<div> My third tab content </div>`,
data: () => ({
additional_info: ''
}),
methods: {
validate() {
this.$emit('on-validate', this.$data, true)
return true
}
}
})
Vue.component('step4', {
template: `<div> Yuhuuu! This seems pretty damn simple </div>`,
data: () => ({
last_step: ''
}),
methods: {
validate() {
this.$emit('on-validate', this.$data, true)
return true
}
}
})
new Vue({
el: '#app',
data() {
return {
tabModel: {},
tabs: [{
title: 'Personal details',
icon: 'ti-user',
component: 'step1'
},
{
title: 'Is Logged In?',
icon: 'ti-settings',
component: 'step2',
hide: false
},
{
title: 'Additional Info',
icon: 'ti-location-pin',
component: 'step3'
},
{
title: 'Last step',
icon: 'ti-check',
component: 'step4'
},
],
}
},
methods: {
onComplete: function() {
alert('Yay. Done!');
},
validateStep(name) {
return this.$refs[name][0].validate()
},
mergeTabModel(model, isValid) {
if (isValid) {
// merging each step model into the final model
this.tabModel = Object.assign({}, this.tabModel, model)
}
}
}
}) <script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.min.css">
<script src="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.js"></script>
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
<div id="app">
<div>
<form-wizard @on-complete="onComplete">
<wizard-step slot-scope="props" slot="step" :tab="props.tab" :transition="props.transition" :index="props.index">
</wizard-step>
<tab-content v-for="tab in tabs" v-if="!tab.hide" :key="tab.title" :title="tab.title" :icon="tab.icon" :before-change="()=>validateStep(tab.component)">
<component :is="tab.component" :ref="tab.component" @on-validate="mergeTabModel"></component>
</tab-content>
<template slot="footer" scope="props">
<div class="wizard-footer-left">
<!-- remove previous button -->
<!-- <wizard-button v-if="props.activeTabIndex > 0 amp;amp; !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button> -->
</div>
<div class="wizard-footer-right">
<wizard-button @click.native="props.nextTab()" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
</div>
</template>
</form-wizard>
<pre>{{ tabModel }}</pre>
</div>
</div> Комментарии:
1. Спасибо @LawrenceCherone, это работает, и я добавил следующую кнопку и шаг в свой импорт, импорт { FormWizard, TabContent, WizardButton, WizardStep } из «мастера vue-формы»
2. np приятно, не забудьте принять, если это работает:), да, нужно сделать это, как описано выше, чтобы заставить его работать, поэтому лучше правильно импортировать