J'ai un menu déroulant de sélection comme celui-ci.
<td v-if="selectedInjection">{{Math.round(selectedInjection)}</td>
Je rend la valeur de cette manière
<select v-model="selectedInjection">
<option v-for="(match,i) in haufigkeitMatches"
:key="i"
:value="match.value" >{{ match.name }}
</option>
</select>
La valeur de {{Math.round (selectedInjection)} change lorsque la valeur de sélection change et que cela fonctionne correctement. Mais lorsque je ne sélectionne aucune valeur, le {{Math.round (selectedInjection)} affiche l'ancienne valeur sélectionnée à moins que je sélectionne une nouvelle valeur.
Comment puis-je masquer le {{Math.round (selectedInjection)} lorsque la valeur de sélection est vide?
Voici le Jsfiddle https://jsfiddle.net/ey3scra0/
3 Réponses :
Je ne sais pas à quel point cela touche votre problème, car vous n'avez pas fourni d'exemple sur la manière dont les données de votre application changent. Si une variable dépend d'une autre variable, vous devez l'observer et contrôler ce changement. Tout comme moi ici, je suis une variable, vérifie si elle est vide puis réinitialise la deuxième variable. Si ce n'est toujours pas le cas, saisissez plus de données, un plus gros morceau de code, puis j'ajusterai également la réponse.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="selectedInjection">
<option v-for="(match,i) in haufigkeitMatches" :key="i" :value="match.value">{{ match.name }}</option>
</select>
<div v-show="selectedInjection">{{round}}</div>
<div>DIV is {{selectedInjection ? 'visible' : 'invisible'}}</div>
<button @click="add">Add</button>
<button @click="del">Del</button>
</div>
new Vue({
data: {
selectedInjection: null,
haufigkeitMatches: []
},
computed: {
round() {
return Math.round(this.selectedInjection);
}
},
watch: {
haufigkeitMatches(val) {
if (!val.length) {
this.selectedInjection = null;
}
}
},
methods: {
add() {
this.haufigkeitMatches.push({
name: 'Fus',
value: 1.1
}, {
name: 'Ro',
value: 2.2
}, {
name: 'Dah',
value: 3.3
})
},
del() {
this.haufigkeitMatches = [];
}
}
}).$mount('#app');
Vous devez fournir plus de code et il est préférable d'insérer un extrait de code pour faciliter la réponse à la question.
Merci pour vos efforts, j'ai édité ma question et j'y ai joint jsfiddle
Mieux vaut utiliser Ensuite, ajoutez @change lors de la deuxième sélection: Vous devez également ajouter un champ supplémentaire Voici un exemple de travail: JSFiddle v-show a> dans votre div: data:{
showSelectedInjection: false,
(...)
methods:{
setSelectsToDefault(){
this.selectedIeProKg = 0;
this.selectedPreisProIE = 0;
this.showSelectedInjection = this.haufigkeitMatches.map(h => h.value).includes(this.selectedInjection);
},
setShowSelectedInjection(){
this.showSelectedInjection = true;
}
<select v-model="selectedInjection" @change="setShowSelectedInjection">
showSelectedInjection avec la méthode setShowSelectedInjection et définissez showSelectedInjection dans setSelectsToDefault:<div class="hideResult" v-show="showSelectedInjection && selectedProduct != ''">
{{Math.round(selectedInjection)}}
</div>
Bonjour, v-show = "selectedInjection> 0" n'aide pas. Vous pouvez vérifier dans le jsfiddle dans ma question. Si je règle this.selectedInjection = 0 , cela réinitialise le v-model = "selectedInjection" , ce que je ne devrais pas. Lorsque je sélectionne d'abord puis que je sélectionne en second lieu, une valeur est générée. Lorsque je réinitialise la première option de sélection pour vider, la deuxième seconde sélection se vide automatiquement. Mais {{Math.round (selectedInjection)}} reste dans les parages.
Mise à jour de la réponse et du lien JSFiddle - maintenant votre modèle d'injection sélectionné n'est pas réinitialisé. J'ai ajouté un champ supplémentaire showSelectedInjection.
Merci beaucoup. Cela fonctionne à 90%, lorsque je règle la première sélection et la seconde sélection, cela donne une valeur, puis immédiatement lorsque je règle la première sélection sur l'option vide, la deuxième sélection devient également vide, ce qui est bien Mais toujours la valeur traîne.
Mise à jour de la réponse et du lien JSFiddle - J'ai ajouté une condition supplémentaire dans v-show pour ce cas de bord: v-show = "showSelectedInjection && selectedProduct! = ''" . J'espère que cela fonctionne à 100% maintenant.
Cela fonctionne pour moi. Il efface à chaque fois l'ancienne valeur. Veuillez essayer ceci.
<div id="app">
<select v-model="selectedProduct" @change="setSelectsToDefault">
<option value=""></option>
<option v-for="(level1,index) in products"
:key="index"
:value="level1">{{level1.name}}</option>
</select>
<select v-model="selectedInjection">
<option v-for="(match,i) in haufigkeitMatches"
:key="i"
:value="match.value" >{{ match.name }}</option>
</select>
<table>
<tr>
<td class="table-result-body-ipJahr"><div class="hideResult" v-if="selectedInjection> 0">{{Math.round(selectedInjection)}}</div></td>
</tr>
</table>
</div>
"use strict";
new Vue({
el: '#app',
data: {
selectedPreisProIE: [],
selectedIeProKg: [],
selectedGewicht: [],
selectedInjection: '',
selectedProduct: null,
dataJson: [],
products: [{
name: "ivi",
Hint: "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
frequency: [1, 2, 8]
}, {
name: "ynovi",
Hint: "40-50 IE/kg\n2x/Woche im Abstand\nvon 3-4 Tagen",
frequency: [2, 6, 7]
}, {
name: "octa",
Hint: "50 (25-65) IE/kg\nalle 3-5 Tage",
frequency: [6, 7, 8]
}, {
name: "eroct",
Hint: "50 IE/kg \nalle 4 Tage",
frequency: [7]
}, {
name: "ltry",
Hint: "20-40 I.E./kg\n2-3x/Woche",
frequency: [2, 3]
}, {
name: "ate",
Hint: "20-40 I.E./kg\nAlle 2-3 Tage",
frequency: [5, 6]
}, {
name: "Facto A",
Hint: "20-40 I.E./kg\nAlle 2-3 Tage",
frequency: [5, 6]
}, {
name: "Eight",
Hint: "40-60 I.E./kg \nJeden 3.Tag oder\n2x/Woche",
frequency: [2, 3, 5, 6]
}, {
name: "iq_Vima",
Hint: "20-40 I.E./kg\nAlle 2-3 Tage",
frequency: [5, 6]
}, {
name: "Afla",
Hint: "20-50 I.E./kg\n2-3x/Woche",
frequency: [2, 3]
}, {
name: "Pma",
Hint: "20-40 I.E./kg\nAlle 2-3 Tage",
frequency: [5, 6]
}, {
name: "others",
Hint: "Individuell",
frequency: [1, 2, 3, 4, 5, 6, 7, 8]
}],
haufigkeit: [{
name: "1x / Woche",
id: 1,
value: 52.1428571429
}, {
name: "2x / Woche",
value: 104.2857142857143,
id: 2
}, {
name: "3x / Woche",
value: 156.4285714285714,
id: 3
}, {
name: "alle 1 Tage",
value: 365,
id: 4
}, {
name: "alle 2 Tage",
value: 182.5,
id: 5
}, {
name: "alle 3 Tage",
value: 121.6666666666667,
id: 6
}, {
name: "alle 4 Tage",
value: 91.25,
id: 7
}, {
name: "alle 5 Tage",
value: 73,
id: 8
}]
},
computed: {
haufigkeitMatches: function haufigkeitMatches() {
var _this = this;
if (this.selectedProduct) {
return this.haufigkeit.filter(function (x) {
return _this.selectedProduct.frequency.includes(x.id);
});
}
},
},
methods:{
setSelectsToDefault(){
this.selectedIeProKg = 0;
this.selectedPreisProIE = 0;
this.selectedGewicht = 0;
this.selectedInjection='';
}
}
});
Vous pouvez essayer la condition sur votre condition v-if: v-if = "selectedInjection.length> 0".
Je suppose que les options sont remplies à partir d'une API. Dans ce cas, vérifiez haufigkeitMatches.length> 0. Sinon, vérifiez la valeur initiale de selectedInjection. Par exemple. si la valeur initiale de selectedInjection est ''. Vérifiez selectedInjection! == ''
Méfiez-vous de l'utilisation de l'index dans une boucle pour la clé. Vue perdra la trace si vous faites cela et pourrait entraîner des bogues.
v-if = "selectedInjection.length> 0" me donne une erreur
Impossible de lire la propriété 'length' de nullJ'ai modifié ma question et joint un jsfiddle