Stepper with v-model


Topic: Stepper with v-model

devilryo pro asked 6 years ago

When I enter text inside an input that as v-model all the steps of my stepper shows.

How can I work with v-model inputs inside a stepper ?

My code is :

<template>
<section class="container">
<mdb-stepper
:submit-function="onSubmit"
buttons
within
next-btn="Suivant"
prev-btn="Précédent"
submit-btn="Enrégistrer">
<mdb-step
slot="content"
name="Données de prévisualisation"
icon="eye">
<h3 class="font-weight-bold pl-0 my-4"><strong>Données de prévisualisation</strong></h3>
<mdb-input
v-model="editedFlat.previewTitle"
label="Titre" />
<mdb-input
v-model="editedFlat.city"
label="Ville" />
<mdb-input
v-model="editedFlat.previewContent"
label="Texte de prévisualisation" />
<mdb-input
v-model="editedFlat.price"
label="Prix" />
<mdb-file-input
btn-color="primary" />
<img
v-if="flat !== null"
:src="flat.thumbnail" >
</mdb-step>

<mdb-step
slot="content"
name="Galerie de photos"
icon="photo">
<h3 class="font-weight-bold pl-0 my-4"><strong>Galerie de photos</strong></h3>
<mdb-file-input
multiple
btn-color="primary"/>
<mdb-container
v-if="editedFlat.photos.length > 0"
class="mt-5">
<mdb-row class="mdb-lightbox">
<mdb-col
v-for="(photo, index) in editedFlat.photos"
:key="index"
md="4"
@click="onConfirm(index)">
<figure>
<img
:src="photo"
class="img-fluid"
alt="">
</figure>
</mdb-col>
</mdb-row>
</mdb-container>
</mdb-step>

<mdb-step
slot="content"
name="Informations sur l'appartement"
icon="pencil">
<h3 class="font-weight-bold pl-0 my-4"><strong>Informations sur l'appartement</strong></h3>
<mdb-input
v-model="editedFlat.title"
label="Titre de l'anonnce" />
<mdb-textarea
v-model="editedFlat.content"
:rows="15"
label="Contenu de l'annonce" />
<mdb-input
v-model="editedFlat.numRef"
label="Numéro de référence" />
<mdb-input
v-model="editedFlat.locality"
label="Localité" />
<mdb-input
v-model="editedFlat.nbRooms"
label="Nombre de pièces" />
<mdb-input
v-model="editedFlat.floor"
label="Étage" />
<mdb-input
v-model="editedFlat.nbBathrooms"
label="Nombre de salle de bains" />
<mdb-input
v-model="editedFlat.nbShowers"
label="Nombre de douches" />
<mdb-input
v-model="editedFlat.surface"
label="Surface habitable" />
<mdb-input
v-model="editedFlat.yearConstructed"
label="Année de construction" />
</mdb-step>

<mdb-step
slot="content"
name="Finalisation"
icon="check">
<h3 class="font-weight-bold pl-0 my-4"><strong>Finalisation</strong></h3>
<h2 class="text-center font-weight-bold my-4">Vous avez terminer!</h2>
</mdb-step>
</mdb-stepper>

<mdb-modal
v-if="showModal9"
frame
position="top"
@close="showModal9 = false">
<mdb-modal-body class="text-center">
<span>Êtes-vous sûr de vouloir supprimer cette photo ?</span>
<mdb-btn
color="secondary"
@click.native="showModal9 = false">Annuler</mdb-btn>
<mdb-btn
color="primary"
@click="onDelete">Supprimer</mdb-btn>
</mdb-modal-body>
</mdb-modal>
</section>
</template>

<script>
import {
mdbModal,
mdbModalBody,
mdbBtn,
mdbStepper,
mdbStep,
mdbInput,
mdbFileInput,
mdbTextarea
} from 'mdbvue'

export default {
name: 'AdminFlatForm',
components: {
mdbModal,
mdbModalBody,
mdbBtn,
mdbStepper,
mdbStep,
mdbInput,
mdbFileInput,
mdbTextarea
},
props: {
flat: {
type: Object,
required: false,
default: null
}
},
data() {
return {
showModal9: false,
deletedPhotoIndex: null,
editedFlat: this.flat
? { ...this.flat }
: {
previewTitle: '',
city: '',
thumbnail: '',
previewContent: '',
price: '',
photos: [],
title: '',
content: '',
numRef: '',
locality: '',
nbRooms: '',
floor: '',
nbBathrooms: '',
nbShowers: '',
surface: '',
yearConstructed: ''
}
}
},
methods: {
onSubmit() {
this.$emit('submit', this.editedFlat)
this.$router.push('/admin')
},
onConfirm(index) {
this.deletedPhotoIndex = index
this.showModal9 = true
},
onDelete() {
this.editedFlat.photos.slice(this.deletedPhotoIndex, 1)
}
}
}
</script>

Jakub Strebeyko staff answered 6 years ago

Hi there @devilryo,

Seems like a stepper bug, where v-model inside is causing a re-render of a Step, but not Stepper, which holds proper data about its children. And so the steps props get assessed with default values, including the "number" prop they all assume is 1. We need a re-rendering mechanism in place.

I am adding it as a priority for the vue dev team to fix in the upcoming release.
In the meantime, I suggest defining the "number" props manually so no default value is implicitly applied. Please add :number="1", :number="2" and so on to your consecutive steps (starting from "1", remembering about the colon to indicate a number prop).

<mdb-step
slot="content"
name="Finalisation"
icon="check"
:number="4">

All the best,
Kuba


devilryo pro answered 6 years ago

@Jakub Strebeyko thanks for your answer I have tested your fix and it works fine :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.8.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No