Récupérer les infos d'un template avec input et select

Version imprimable

:salut:

Voici un extrait de mon code :

html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template id="unitTemplate">
   <div class="input-group mb-3">
       <span class="input-group-text" id="basic-addon1" style="width:120px"> {{ name }}</span>
           <input type="number" class="form-control" :value="val" @input="inputChange">
           <select class="form-control" @change="selectChange">
           <option v-for="(option, index) in options" 
             :key="index" :value="option.code">
                  {{ option.name }}
	   </option>
	</select>
    </div>
</template>
 
...
...
...
...
 
<vue-unit v-model="units.flow" :options="optionsFlowUnits" name="Flow"></vue-unit>

js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Vue.component('vue-unit', {
	props: ['name', 'val', 'options'],
	template: '#unitTemplate',
    data: {
		selected: null
	},
	methods: {
		selectChange(e) {
			const selectedCode = e.target.value;
			const option = this.options.find((option) => {
				return option.code === selectedCode;
			});
			this.$emit("input", option);
		},
        inputChange(e) {
            const currentValue = e.target.value;
            const option = this.options.find((option) => {
                return option.value === currentValue;
            });
            this.$emit("input", option);
            alert(currentValue);
        },
	}
});
 
...
...
...
 
let vmRoot = new Vue({
	el: '#root',
	data: {
 
            units: {
			flow: {
                name: "m3/h",
                code: "1",
                val: "",
                }
        },
 
             optionsFlowUnits: [
            {
				name: "m3/h",
				code: "1",
                val: "",
			},
            {
				name: "l/s",
				code: "2",
                val: "",
			},
        ],
    }
});

Dans ce template, je souhaite récupérer la valeur du <select> ET celle de <input>. C'est sur ce dernier point que je bloque.
Pourriez-vous m'aider ?

D'avance merci.

J

01/02/2020, 17h49
gwyohm

le mieux serait d'utiliser la directive v-model sur tes 2 champs.
ainsi, tu aurais les données mappées naturellement, et donc toujours à jour.

:salut:

C'est la première idée que j'ai eue, mais je ne vois pas comment utiliser ces 2 directives dans la réutilisation d'un template. Comment Vue.js va savoir quoi doit aller où ? Pour rappel, l'idée c'est d'avoir un template avec plusieurs forms (input, select, ...).
J'ai tout de même essayer ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template id="doubleInput"> <div class="input-group mb-3"> <span class="input-group-text" style="width:120px"> {{ name }}</span> <input type="number" class="form-control" :value="value" @input="$emit('input', $event.target.value)"> <input type="number" class="form-control" :value="value2" @input="$emit('input', $event.target.value)"> </div> </template> ... ... ... <double-input v-model="dIvalue1" v-model="dIvalue2" name='2 Inputs'></double-input> ... ... ... DoubleInputVal1: {{ dIvalue1 }}<br> DoubleInputVal2: {{ dIvalue2 }}
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Vue.component('double-input', { props: ['name', 'value1', 'value2'], template: '#doubleInput' }); ... ... ... let vmRoot = new Vue({ el: '#root', data: { dIvalue1: '', dIvalue2: '', } });
Et en effet, le dIvalue2 n'est pas renseigné. Mais je fais peut-être aussi ici une erreur. Qu'en penses-tu ?

C'est pourquoi, il me semblait que passer par un object comme
Code:

1 2 3 4 5 6 flow: { name: "m3/h", code: "1", val: "", }
était une bonne idée.
J'arrive à mettre à jour flow.name, mais impossible pour flow.val.

Aie Aie Aie.

Salut,
J'avais mal compris...
Je pense que tu ne peux pas avoir plusieurs v-model sur un composant (mais vraisemblablement, ce sera possible dans vue3...)
En attendant, tu peux faire un v-model sur un objet qui contient toutes tes valeurs:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
...
<double-input v-model="my2Values" name='2 Inputs'></double-input>
...
data() {
  return {
    val1: '',
    val2: '',
  };
},
computed: {
  my2Values: {
    get() {
      return {
        value1: this.val1,
        value2: this.val2,
      };
    },
    set({ value1, value2 }) {
      this.val1 = value1;
      this.val2 = value2;
    },
  },
},

Du côté de double-input, il ne faut pas oublier d'envoyer les 2 éléments à chaque fois:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  <input type="text" :value="value.value1" @input="emitChange('value1', $event)"/>
  <input type="text" :value="value.value2" @input="emitChange('value2', $event)"/>
...
props: {
  value: { type: Object, default: () => ({}),
},
methods: {
  emitChange(key, value) {
    this.$emit('input', {
      ...this.value,
     [key]: value,
  });
}

11/02/2020, 17h13
Jiyuu

:salut:

Merci beaucoup pour ton aide et désolé pour la réponse un peu tardive. On approche vraiment de ce que je cherche à faire.
J'ai cependant encore un hic : lorsque j'écris dans mon premier input je récupère bien la valeur. Par contre "j'efface" celle-ci lorsque j'écris dans le 2ème input. Et l'inverse est vrai.

Tu as une idée ?

++

J

Salut,
Envoies-tu bien les 2 valeurs à chaque fois ?
Citation:
Envoyé par gwyohm
Du côté de double-input, il ne faut pas oublier d'envoyer les 2 éléments à chaque fois:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <input type="text" :value="value.value1" @input="emitChange('value1', $event)"/> <input type="text" :value="value.value2" @input="emitChange('value2', $event)"/> ... props: { value: { type: Object, default: () => ({}), }, methods: { emitChange(key, value) { this.$emit('input', { ...this.value, [key]: value, }); }
Dans mon exemple, la méthode emitChange renvoie l'objet de base en faisant un spread et surcharge la valeur de l'input qui a émis l'événement de changement

14/02/2020, 21h37
Jiyuu

Citation:

Envoyé par gwyohm

Envoies-tu bien les 2 valeurs à chaque fois ?

Non, enfin pour moi non. Je ne renvoie que la valeur de l'input dans lequel je suis. D'un autre coté, je ne pensais qu'affecter celui qui a la key qui correspond.

Citation:

Envoyé par gwyohm

Dans mon exemple, la méthode

Au passage, j'ai bien fait la modif nécessaire : tu passes "event" alors que tu cherches à récupérer "event.target.value"

Citation:

Envoyé par gwyohm

emitChange renvoie l'objet de base en faisant un spread et surcharge la valeur de l'input qui a émis l'événement de changement

Une nouvelle fois, pour moi j'espérai n'affecter que la key en question. Ce n'est pas le cas ?

Citation:

Envoyé par Jiyuu

Au passage, j'ai bien fait la modif nécessaire : tu passes "event" alors que tu cherches à récupérer "event.target.value"

Oups, en effet...

Citation:

Envoyé par Jiyuu

Une nouvelle fois, pour moi j'espérai n'affecter que la key en question. Ce n'est pas le cas ?

Ca dépend...
v-model ne gère qu'une valeur et traite l'événement @input comme étant une mise à jour de la donnée.
quand tu écris
Code:

1 2 <input v-model="jambon" />
c'est un équivalent de
Code:

1 2 <input :value="jambon" @input="jambon=$event.target.value"/>
du coup quand tu passes une référence à un objet à ton composant double-input, lors de l'événement correspondant au v-model, vue remplace la valeur de cet objet par la nouvelle valeur. Si tu ne passes qu'une clé-valeur, l'autre (les autres) sont perdues (d'où le champ qui se vide)
tu peux peut être t'en sortir en faisant quelque chose comme ca:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <double-input v-model="my2Values/> ... computed: { my2Values: { get() { return { value1: this.val1, value2: this.val2, }; }, set(obj) { Object.entries(obj).forEach( ([key, val]) => this.$set(key, val), ); }, }, }