在弹出框的v-show中的条件已经为true,但是页面上不显示是为什么?

用vue.js 做弹出框时 v-show=”item.popbox”中item.popbox已经为true,但是页面上不显示

html:

<ul>
<li v-for="(index, item) in UserData">
    <div class="whole">
        <p class="delete" v-on:click="confirmDelete(index,item)">删除</p>
    </div>                       
    
    <div class="mask" v-show="item.popbox">
        <input type="button" value="确定删除"/>
    </div>                        
</li>
</ul>

vue:

let strange = new Vue({
    el: "#root",
    data: {
        UserData: [],
    },
    methods: { 
        confirmDelete: function (index, item) {
                item.popbox = true;            
                //this.UserData[index].popbox = true;
                
                console.log(item.popbox);
                console.log(index);
                console.log(item);
        },
    },
    created: function () {
        $.each(this.UserData, (i, item) => { item.popbox = false });   
    }
})

控制台结果:

clipboard.png

这样写item.popbox 是true,但是框不弹出,想要请教大家问题在哪里?谢谢~

补充:
css:

.mask {
    background-color: rgba(4, 234, 227, 0.10);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;     

        p {
            text-align: center;
            margin-top: 80px;
            font-size: 24px;
        }

        .buttons {
            width: 200px;
            margin: 50px auto 0 auto;
        }

        .right {
            float: right;
        }

        input, button {
            font-size: 20px;
        }
    }
}

clipboard.png

回答:

这个问题的关键在于,不能在created里面修改data, 这样体现不在页面的数据中。和生命周期有关。在创建一个VUE实例之前就应该将这个添进去。

问题解决了。每一个item写一个popbox显然不划算,这里只是为了解决v-show为true时不显示的问题,实际应用中,每个item的detail更可能踩到这个坑。

HTML:


<div id="example">
        <ul>
            <li v-for="(index, item) in UserData">
                <div class="whole">
                    <span>{{item.name}}</span>
                    <button class="delete" v-on:click="Delete(item)">删除</button>
                </div>
                <!---->
                <div class="mask" v-show="item.popbox">
                    <div class="popbox">
                        <p>确定删除吗?</p>
                        <button v-on:click='confirmDelete(index,item)'>确定</button>
                    </div>
                </div>
            </li>
        </ul>

Js:

var data: any = [
  { name: "z", id: 01 },
  { name: "q", id: 02 },
  { name: "c", id: 03 },
  { name: "y", id: 04 }]

$.each(data, function (i, item) { item.popbox = false })    //应该写在这里

let strange = new Vue({
  el: "#example",
  data: {
    UserData: data,
  },
  methods: {
    Delete: function (item: any) {
      item.popbox = !item.popbox;
    },
    confirmDelete: function (index: number, item: any) {
      this.UserData.splice(index, 1)
      item.popbox = false;
    }
  },
  created: function () {
    //$.each(this.UserData, (i, item) => { item.popbox = false });    //不能写在这里
  }
})

最后结果,该出现的弹出层出现了:

clipboard.png

CSS:

.whole{
    margin-top: 20px;
}
.mask {
    background-color: rgba(5, 5, 5, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    }
input {
    font-size: 20px;
}
.popbox{
    width: 300px;
    height: 200px;    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: lightcoral;
}
p{
    text-align: center;
    line-height: 120px;
}
.popbox button{
    display: block;
    margin: 0 auto;
}

回答:

感觉多半是样式问题,看下mask的样式,把审查元素后的元素结构与样式截图贴出来看看……

回答:

你的赋值没有触发vue视图更新, 你需要用 $set去赋值才行,要么在你赋值后添加$forceUpdate

回答:

我也有类似的问题,我的组件是个echart图表,原因可能是:
它初始化必须先获取dom元素,并且必须有高度,而我v-show绑定的isShow这个数据没有在初始的data里或者在data里但初始布尔值为false,导致它最初判断将容器隐藏,这样这个既有dom要求(对应v-if)又有高度要求(对应v-show)的echart组件无法正常初始化,所以即使我在created里请求数据回调改变isShow为true它也无法正常显示
我的解决办法是在vue实例的data对象里加上isShow并将初始值定为true,data:{isShow:true,…}请求数据后再去变更isShow的值隐藏。
可以参考下

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注