Discussion :

[Jiyuu]

Voici un extrait de mon code :

html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[Jiyuu]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[gwyohm]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,
  });
}

[Jiyuu]

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

[gwyohm]

Salut,
Envoies-tu bien les 2 valeurs à chaque fois ?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Jiyuu]

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.

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"

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 ?

[gwyohm]

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...

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
  <input v-model="jambon" />

c'est un équivalent de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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),
      );
    },
  },
}