1👍
Better to use v-show
in your div:
<div class="hideResult" v-show="showSelectedInjection && selectedProduct != ''">
{{Math.round(selectedInjection)}}
</div>
Then add @change on second select:
<select v-model="selectedInjection" @change="setShowSelectedInjection">
Also you need to add extra field showSelectedInjection
with method setShowSelectedInjection
and set showSelectedInjection
in setSelectsToDefault
:
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;
}
Here is a working example: JSFiddle
- [Vuejs]-Vue – Iterating through an object after deleting the child objects
- [Vuejs]-Problem using Firefox ESR 45.4.0 and Vuejs 2
0👍
I don’t know how much it hits your problem because you haven’t provided an example of how the data in your application changes. If a variable depends on another variable, you must observe it and control that change. Just like me here, I follow a variable, check if it is empty and then reset the second variable. If this is still not the case, enter more data, a larger piece of code, then I will also adjust the answer.
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');
<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>
0👍
This is working for me. It is clearing the old value everytime. Please try this.
<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='';
}
}
});