时间戳

首页 > 解决方案 > Vuejs在v-model为空时隐藏一个div

vue.js - Vuejs在v-model为空时隐藏一个div

问题描述

我有一个这样的选择下拉菜单。

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

The value of the {{Math.round(selectedInjection)}changes when the select value changes and it's working fine. 但是当我不选择任何值时，{{Math.round(selectedInjection)}除非我选择新值，否则会显示旧的选定值。How can I hid the {{Math.round(selectedInjection)}when the select value is empty?

这是 Jsfiddle https://jsfiddle.net/ey3scra0/

标签： vue.jsvuejs2vuejs3

解决方案

最好v-show在您的 div 中使用：

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

然后在第二次选择时添加@change：

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

您还需要showSelectedInjection使用方法添加额外的字段setShowSelectedInjection并设置：showSelectedInjectionsetSelectsToDefault

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

推荐阅读