Question

我有四个按钮和相应的四个部分。单击第一个按钮时，我要显示第一个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>

有什么建议吗？

Answer 1

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

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

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

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

Answer 2

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

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

Vue.js问题控制Div与v-show

2 个答案: