Vuejs Скрыть div, когда v-модель пуста

У меня есть выпадающий список для выбора.

<select v-model="selectedInjection">
    <option v-for="(match,i) in haufigkeitMatches"
        :key="i"
        :value="match.value" >{{ match.name }}
    </option>
</select>

Я показываю значение таким образом

<td v-if="selectedInjection">{{Math.round(selectedInjection)}</td>

Значение {{Math.round(selectedInjection)} изменяется при изменении значения выбора, и оно работает нормально. Но когда я не выбираю никакого значения, {{Math.round(selectedInjection)} показывает старое выбранное значение, если я не выберу новое значение. Как я могу скрыть {{Math.round(selectedInjection)}, когда значение выбора пусто?

Вот Jsfiddle https://jsfiddle.net/ey3scra0/


person Sreenivasulu Gudipati    schedule 28.01.2020    source источник
comment
Вы можете попробовать это условие в своем условии v-if: v-if = selectedInjection.length ›0.   -  person Sunny Prakash    schedule 28.01.2020
comment
Я предполагаю, что параметры заполняются из API. В этом случае проверьте haufigkeitMatches.length> 0. В противном случае проверьте начальное значение selectedInjection. Например. если начальное значение selectedInjection равно "". Отметьте selectedInjection! == ''   -  person Pranav Kale    schedule 28.01.2020
comment
Остерегайтесь использования индекса в цикле для ключа. Vue потеряет след, если вы сделаете это, и это может привести к ошибкам.   -  person GBWDev    schedule 28.01.2020
comment
v-if = selectedInjection.length ›0 дает мне ошибку Cannot read property 'length' of null Я отредактировал свой вопрос и прикрепил jsfiddle   -  person Sreenivasulu Gudipati    schedule 28.01.2020


Ответы (3)


Лучше использовать v-show в своем div:

<div class="hideResult" v-show="showSelectedInjection && selectedProduct != ''">
   {{Math.round(selectedInjection)}}
</div>

Затем добавьте @change при втором выборе:

<select v-model="selectedInjection" @change="setShowSelectedInjection">

Также вам нужно добавить дополнительное поле showSelectedInjection с помощью метода setShowSelectedInjection и установить showSelectedInjection в 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;
            }

Вот рабочий пример: JSFiddle

person test_    schedule 28.01.2020
comment
Привет, v-show="selectedInjection > 0" не помогает. Вы можете проверить jsfiddle в моем вопросе. Если я установил this.selectedInjection = 0, он сбрасывает v-model="selectedInjection", чего мне не следует. Когда я сначала выбираю, а затем второй выбор, он выводит значение. Когда я сбрасываю первый вариант выбора на пустой, второй второй выбор автоматически становится пустым. Но {{Math.round(selectedInjection)}} остается. - person Sreenivasulu Gudipati; 28.01.2020
comment
Обновленный ответ и ссылка JSFiddle - теперь ваша выбранная модель Injection не сбрасывается. Я добавил дополнительное поле showSelectedInjection. - person test_; 28.01.2020
comment
Большое тебе спасибо. Это работает как 90%, когда я устанавливаю первый выбор и второй выбор, он дает значение, затем сразу же, когда я устанавливаю первый выбор на пустой вариант, тогда второй выбор также становится пустым, что хорошо, но все же значение торчит. - person Sreenivasulu Gudipati; 28.01.2020
comment
Обновленный ответ и ссылка JSFiddle - я добавил дополнительное условие в v-show для этого крайнего случая: v-show="showSelectedInjection && selectedProduct != ''". Надеюсь, теперь он работает на 100%. - person test_; 28.01.2020

Я не знаю, насколько это затрагивает вашу проблему, потому что вы не привели пример того, как изменяются данные в вашем приложении. Если переменная зависит от другой переменной, вы должны наблюдать за ней и контролировать это изменение. Как и здесь, я слежу за переменной, проверяю, пуста ли она, а затем сбрасываю вторую переменную. Если это все же не так, введите больше данных, больший фрагмент кода, тогда я также откорректирую ответ.

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>

person Gander    schedule 28.01.2020
comment
Вам следует предоставить больше кода, и лучше всего вставить фрагмент кода, чтобы облегчить ответ на вопрос. - person Gander; 28.01.2020
comment
Спасибо за ваши усилия, я отредактировал свой вопрос и добавил в него jsfiddle - person Sreenivasulu Gudipati; 28.01.2020

Это работает для меня. Он каждый раз очищает старое значение. Пожалуйста, попробуйте это.

<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='';
            }
            }
    });
person Sunny Prakash    schedule 29.01.2020