Question

我有一个包含行的表。行在tbody内是可点击的。我想在点击的行下面以列表的形式显示一个额外的行，并提供更多信息。

如果再次点击该行或“列表行”，则会再次隐藏“列表行”。

我的实现是在原始行下创建'list-row'并隐藏它。如果按下tbody（在tbody两行内，原始行和相应的'list-row），则会切换额外的行。

现在，所有这些都被隐藏/显示被按下，因为我只有一个布尔变量控制按下/未按下。我想用vector代替。这可以通过将clickStatus设置为数组并将v-show="clickStatus"替换为v-show="clickStatus[indexa]"来完成。

这不起作用！单击tbody时不会发生任何事情。我知道在日志的帮助下数组被更改但是show-function没有反应。知道为什么它不起作用以及如何解决它？

<template id = "transactionTable">
<div> 
    <table class= "list-table">
        <thead>
            <th v-for="(index, labels) in inlabels" track-by="$index"> 
                 {{labels}}
            </th>     
        </thead>
        <tbody v-for="(indexa, s) in insubset" track-by="$index" @click="rowClicked($event)"> {{s}}
                <tr class = "subList" id = {{indexa}}   >
                    <td v-for="(indexb, e) in s") track-by="$index"  > {{ e }} </td>
                </tr> 
                <tr class = "mainList" v-show="clickStatus" > 
                    <td colspan = "8"  >
                        <div v-for="(indedc, column) in inlist[indexa]" track-by="$index"> {{label}}
                            <span> {{ column['name'] }} : {{ column['value'] }} </span> <br>
                        </div>
                    </td> 
                </tr> 
        </tbody>
    </table>
</div>
</template>


export default { //broadcast
    template: "#transactionTable",



    data : function() {
       return {
            clickStatus : false
        }
    },

    props : {

        inlabels: {
              default: function () {
                return { null }
              }
            }, 

        insubset: {
              default: function () {
                return { null }
              }
            }, 
        inlist: {
              default: function () {
                return { null }
              }
            }, 
    },

    methods :{
        rowClicked:function(e) 
        {
            this.clickStatus = !this.clickStatus;
            console.log(this.clickStatus);
        },

    },
}

首先编辑

method{
            rowClicked:function(e, index) 
            {
                this.clickStatus[index] = !this.clickStatus[index];
                console.log(this.clickStatus);
            },
    }
    ready: {
        this.clickStatus = Array[100];
        for( int i = 0; i < this.clickStatus.length; ++i )
           this.clickStatus[i] = false;
}

v-show="clickStatus[indexa]"

Answer 1

您应该将索引传递给rowClicked函数，并使用它将clickStatus存储在该索引处。

您还应该将clickStatus声明为数组而不是布尔值。

v-shown无法从数组索引中读取值

1 个答案: