v-shown無法從數組索引中讀取值

我有一個帶有行的表。行在tbody之內，可點擊。我想在單擊行的下方以更多信息的形式顯示額外的行。v-shown無法從數組索引中讀取值

如果再次點擊該行或'list-row'，'list-row'將再次被隱藏。

我的實現是在原始行下創建'list-row'並隱藏它。如果tbody（在tbody中有兩行，原始行和相應的'list-row'）被按下，多餘的行會被切換。

現在，所有這些都被隱藏/顯示被按下，因爲我只有一個布爾變量，控制按下/未按下。我想用vector代替。這可以通過將clickStatus設置爲數組並將v-show="clickStatus"替換爲v-show="clickStatus[indexa]"來完成。

這不起作用！點擊tbody時沒有任何事情發生。我知道在日誌的幫助下，數組已經改變，但是顯示功能沒有反應。任何想法爲什麼它不工作，以及如何解決它？

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

來源

2016-08-05 Niclas Jonsson

將'v-show =「clickStatus」'更改爲'v-show =「clickStatus [indexa]」' – gurghet

現在您正在爲'insubset'中的每個項目生成'tbody'。我希望那就是你想要的。對於我來說，就像一張桌子上有'thead'和一個'tbody'似乎很奇怪。使用ID生成的html元素，這就是你應該做的。使用Id的你不需要安全的數組或每一個，因爲你可以識別每一行或tbody。你知道你點擊了哪個'tbody'，並且可以引用你想要顯示的正確元素。 –

你應該索引傳遞到您的rowClicked功能，並用它來clickStatus存儲索引。

您還應該聲明clickStatus作爲數組而不是布爾值。

來源

2016-08-05 14:36:23 gurghet

看我的編輯。正如正文中的解釋，我已經嘗試過，但是當我按下按鈕時它沒有捕獲到更新。我知道正確的索引值的變化，因爲我登錄數組，但v-show無法捕捉它。 –

v-shown無法從數組索引中讀取值

回答

相關問題