vue.js - 在弹出框的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 });   
    }
})

控制台结果：

这样写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;
        }
    }
}

解决方案

这个问题的关键在于，不能在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 });    //不能写在这里
  }
})

最后结果，该出现的弹出层出现了：

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

这篇关于vue.js - 在弹出框的v-show中的条件已经为true，但是页面上不显示是为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！