Vue.js 使用 v-show 控制 Div 的问题答案

【问题标题】：Vue.js Problem Controlling Div with v-showVue.js 使用 v-show 控制 Div 的问题
【发布时间】：2019-03-27 16:11:33
【问题描述】：

我有四个按钮和相应的四个分区。单击第一个按钮时，我想显示第一个 div，单击第二个按钮时，我想显示第二个 div，依此类推。

按钮单击事件调用具有分区编号（0 到 3）的方法
@click="showDiv(0)" 用于第一个按钮，@click="showDiv(1)" 用于第二个按钮。这是我的 showDiv() 方法 showDiv: 函数(divNumber)

showDiv: function(divNumber)
{
        this.showDetailsDiv.forEach(function(item, index, array) {
              array[index]=null;
            });
            this.showDetailsDiv[divNumber] = true; 
            console.log(this.ShowDetailsDiv);
}

showDetailsDiv prop 的初始值为空值数组

showDetailsDiv: [
                null,
                null,
                null,
                null
            ],

在模板中，我试图通过 v-show 来控制分区

    <div v-show="showDetailsDiv[0]">
       First div
    </div>
    <div v-show="showDetailsDiv[1]">
       Second div
    </div>  
   <div v-show="showDetailsDiv[2]">
       Third div
    </div>

当我点击按钮时，我看到 showDetailsDiv 的对应元素正在变为 true，但是，对应的分区不显示。我的逻辑有什么问题吗？

当我尝试使用以下代码使用直接属性（例如 showDiv0、showDiv1、showDiv2 和 showDiv3）来控制除法的显示时，它可以工作。

showDiv: function(divNumber)
{
    this.showDetailsDiv.forEach(function(item, index, array) {
      array[index]=null;
    });
    this.showDetailsDiv[divNumber] = true; 
    console.log(this.showDetailsDiv);

    this.showDiv0= false; 
    this.showDiv1= false; 
    this.showDiv2= false; 
    this.showDiv3= false; 
    let elementID = 'showDiv' + divNumber;
    this[elementID] = true;
}

 <div v-show="showDiv0">
       First div
    </div>
    <div v-show="showDiv1">
       Second div
    </div>  
   <div v-show="showDiv2">
       Third div
    </div>

有什么建议吗？

【问题讨论】：

您希望同时只有一个元素可见吗？
是的，一次只能看到一个 div

标签： vue.js

【解决方案1】：

保持简单。模板应如下所示：

   <div v-show="visible == 0">
       First div
    </div>
    <div v-show="visible == 1">
       Second div
    </div>  
   <div v-show="visible == 2">
       Third div
    </div>

data() {
    return {
        visible: null,
    }
}

您可以将showDiv 方法简化为：

showDiv: function(divNumber) {
    this.visible = divNumber;
}

您还可以添加方法isVisible 来检查哪个 div 是可见的：

isVisible(divNumber) {
    return this.visible == divNumber;
}

并像这样使用它：

<div v-show="isVisible(0)">
    First div
</div>

【讨论】：

【解决方案2】：

如果您直接更改数组元素，由于 JavaScript 的限制，Vue 将无法检测到更改。你应该可以使用相应的数组方法来做到这一点：

this.showDetailsDiv.splice(divNumber, 1, true);

您可以在这里找到更多方法：https://vuejs.org/v2/guide/list.html#Mutation-Methods

另外，如果showDetailsDiv 是一个道具，你应该避免修改它，而是在组件数据中创建一个副本。

【讨论】：