2 pb Form plus propre et dynamique
nlefebvre
Bonjour,
j'ai un formulaire qui est créé a partie d'une requete ajax et des graphiques associés.
Et formulaire est un muti setp.
Comme vous le voyez dans le code:
Le input pour du simulateur est changer car je ne voyez pas comment recuper les valeur sinon ?
Je pense qu'il y a surment une autre methode plus propre pour géré les relations ?
Merci a l'avance de votre aide.
Voici un boue du json
[
[
{
"id": 1,
"niv": 2,
"title": "Bienvenue sur InvestAdvisor > Votre projet - Etape n° 1",
"supported_headers": [
1,
2,
3,
4,
5,
6
]
},
{
"id": 1,
"names": "Pour commencer,choissir une catégorie de placements",
"error_message": "Cette valeur ne doit pas être vide.",
"response": [
{
"id": 1,
"response": "Epargne. Accroître mon capital",
"locale": "fr",
"scoring": [],
"name_class": "q_RadioResponse_fr_1"
},
{
"id": 2,
"response": "Préparer ma retraite",
"locale": "fr",
"scoring": [],
"name_class": "q_RadioResponse_fr_2"
},
{
"id": 3,
"response": "Projet immobilier",
"locale": "fr",
"scoring": [],
"name_class": "q_RadioResponse_fr_3"
},
{
"id": 4,
"response": "Autre",
"locale": "fr",
"scoring": [],
"name_class": "q_RadioResponse_fr_4"
}
]
}
],
[
{
"id": 3,
"niv": 2,
"title": "Votre projet - Etape n° 2 (Information sur votre situation)",
"supported_headers": [
1,
2,
3,
4,
5,
6
]
},
{
"id": 1,
"locale": "fr",
"name": "Quel montant souhaitez vous atteindre",
"error_message": "Cette valeur ne doit pas être vide.",
"scoring": [],
"input_type": "number",
"name_class": "q_SingleTextPagePart_fr_1"
},
{
"id": 2,
"locale": "fr",
"name": "Quel horizon de placement envisagez-vous pour atteindre votre objectif ?",
"error_message": "Cette valeur ne doit pas être vide.",
"scoring": [],
"input_type": "number",
"name_class": "q_SingleTextPagePart_fr_2"
},
{
"id": 3,
"locale": "fr",
"name": "Combien souhaitez-vous épargner par mois ?",
"error_message": "Cette valeur ne doit pas être vide.",
"scoring": [],
"input_type": "number",
"name_class": "q_SingleTextPagePart_fr_3"
},
{
"id": 4,
"locale": "fr",
"name": "Quel montant souhaitez-vous placer à l'ouverture de votre compte ?",
"error_message": "Cette valeur ne doit pas être vide.",
"scoring": [],
"input_type": "number",
"name_class": "q_SingleTextPagePart_fr_4"
}
]
]le template :
<template>
<div class="container">
<!--{{index}}-->
<div class="row">
<div class="col-xs-5 ">
<cube-spin style="margin-top: 30%; margin-left: 30%" v-show="$store.state.loadting"></cube-spin>
<form @submit.prevent="save" v-show="!$store.state.loadting" >
<div class="question">
<div class="question-choices">
<div class="question-choice" v-for="(item ,i) in items[index]">
<h2 class="f-sixe">{{item.title}}</h2>
<p v-html="item.content"></p>
<div v-if="index == 3" class="slider">
<sliders v-if="i == 1"></sliders>
</div>
<div class="form-group" v-if="item.response">
<label :class="[tooltipStatus]">
{{ item.names }}
<span v-if="item.description" class="glyphicon glyphicon glyphicon-info-sign" data-html="true" data-toggle="tooltip" data-placement="right" :title="item.description"></span>
</label>
<div class="radio" v-for="is in item.response" :for="is.response" >
<label> <input type="radio" :name="nameForm" value="0" v-model="gender">{{ is.response }} </label>
</div>
<div class="message">{{ validation.firstError('gender') }}</div>
</div>
<div class="form-group" v-if="item.name">
<label :for="item.name">{{ item.name }} <span v-if="item.description" class="glyphicon glyphicon glyphicon-info-sign" data-html="true" data-toggle="tooltip" data-placement="right" :title="item.description"></span></label>
<input type="text" :name="'q_{item.response.id}'" class="form-control" :id="item.name" v-model="field[item.name_class]" v-if="index != 1">
<input type="number" class="form-control" min="1" v-model.number="response[i]" v-if="index = 1">{{ response[i] }}
</div>
{{item.recaptitle}}
<div v-if="index == 10">
<bar v-if="i == 0"></bar>
<maps v-if="i == 0"></maps>
</div>
</div>
</div>
</div>
<button @click="back()" v-if="index > 0" class="btn btn-default">{{ $tlang($i18n.locale(), 'button.back') }}
</button>
<button type="submit" @click="next()" class="btn btn-primary margin-b">{{ $tlang($i18n.locale(), 'button.con') }}
</button>
</form>
</div>
<div class="col-xs-7 ">
<pie v-if="index <= 2" :locale="loc"></pie>
<lines v-if="index >= 2"></lines>
<simulator :montant="response[4]" :object="response[1]" :mensualiter="response[3]" :durer="response[2]" v-if="index = 1"></simulator>
</div>
</div>
</div>
</template>l' export :
export default {
props: {
test2: String,
loc: String,
default: 'en',
value: {type: Array, default () { return [] }}
},
data () {
return {
namesThatRhyme: [{
id: '',
value: ''
}],
items: [],
response: [],
test3: [],
test: [],
indicatorclass: true,
step: 1,
active: 1,
firststep: true,
nextStep: '',
lastStep: '',
laststep: false,
gender: '',
index: 1,
loading: true,
field: {}
}
},
validators: {
gender: function (value) {
return Validator.value(value).required()
}
},
components: {
Simulator,
Sliders,
Maps,
Bars,
lines,
pie,
CubeSpin
},
methods: {
...Vuex.mapActions({
removeloadingStore: 'removeloading',
addloadingStore: 'addloading',
addIndexStore: 'addIndex'
}),
fetchData2 () {
let $this = this
var full = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + '/slider'
let config = {
onUploadProgress: function (progressEvent) {
$this.addloadingStore()
},
onDownloadProgress: function (progressEvent) {
$this.removeloadingStore()
}
}
const params = {'test': JSON.parse(this.test2)}
this.$http.post(full, qs.stringify(params), config)
.then(response => response.data)
.then(data => Vue.set(this, 'items', data))
// .then(data => console.log(data))
.catch(function (error) {
console.log(error)
if (error.response) {
return console.log(error.response)
}
})
},
stepChanged: function (step) {
this.currentstep = step
},
next () {
let e = this
this.$validate()
.then(function (success) {
if (success) {
if (e.index < e.items.length - 1) {
e.index++
if (e.index === 2) {
this.removePie()
}
e.addIndexStore(e.index)
}
}
})
},
back () {
if (this.index > 0) {
this.index--
this.addIndexStore(this.index)
}
},
save () {
this.namesThatRhyme.push(this.gender)
this.namesThatRhyme.push({
response: this.response,
id: this.index
})
this.namesThatRhyme.push({
response: this.field,
id: this.index
})
this.field = ''
}
},
computed: {
...Vuex.mapGetters([
'getIdStore',
'getSlider'
]),
counte () {
return this.items.length
},
nameForm () {
return 'radio_group_1'
},
tooltipStatus () {
return this.index === 3 ? 'vue-h2' : ''
},
removePie () {
return this.$children[1].$destroy()
}
},
watch: {
locale (val) {
this.$i18n.locale = val
}
},
created: function () {
Vue.i18n.set(this.loc)
this.fetchData2()
},
mounted () {
// console.log(this.translateIn(this.$i18n.locale(), 'button.back'))
// console.log(Vue.i18n.translateIn(this.$i18n.locale(), 'simul.versement'))
// console.log(this.items))
// this.test = JSON.parse(this.test2)
}
}