Question

我有一个表，其中VueJS会像这样呈现一个列表，但是如果没有属性Regional或ConstRegional的数据，如何隐藏名为ConstRegional-P的表行节，或者ConstRegional-S？

<table class='table'>
            <tbody>
              <tr>
                <th style='border-top: none'>Regional:</th>
                  <td style='border-top: none'>
                    <ul>
                      <template v-for='item in ec'>
                      <li v-if='item["Extraction Criteria"] == "ConstRegional"' :key='item["Extraction Criteria"]'>
                        {{item['Collection Requirements']}}
                      </li>
                      <li v-if='item["Extraction Criteria"] == "ConstRegional-P"' :key='item["Extraction Criteria"]'>
                        {{item['Collection Requirements']}}
                      </li>
                      <li v-if='item["Extraction Criteria"] == "ConstRegional-S"' :key='item["Extraction Criteria"]'>
                        {{item['Collection Requirements']}}
                      </li>
                      </template>
                    </ul>
                  </td>
              </tr>
....snip

Answer 1

在<tr>标记中，您可以按如下所示对长度进行过滤检查，以在未找到所有必需的属性时隐藏整个<tr>。

<tr v-if="ec.filter((item) => item['Extraction Criteria'] == 'ConstRegional-P' || item['Extraction Criteria'] == 'ConstRegional-S' || item['Extraction Criteria'] == 'ConstRegional').length"</tr>

因此无需在v-if内写3 v-for，
{{item['Collection Requirements']}}

就足够了

要使其更清洁，您可以将过滤器放入methods内。

function callMe() {
  var vm = new Vue({
    el: '#root',
    data: {
      filterLen:false,
      ec: [/*{
          "Extraction Criteria":"ConstRegional-P"
        },
        {
          "Extraction Criteria":"ConstRegional-S"
        },
        {
          "Extraction Criteria":"ConstRegional"
        },*/
        {
          "Extraction Criteria":"Test"
        }
      ]
    },
    created(){
     this.isAllPresent()
    },
    methods: {
     isAllPresent:function(){
        
        this.filterLen= this.ec.filter((item) => {
        return item["Extraction Criteria"] == 'ConstRegional-P' || item["Extraction Criteria"] == 'ConstRegional-S' || item["Extraction Criteria"] == 'ConstRegional'
        }).length
     
     }

    }

  })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
<table>
<tbody>
  <tr v-if="filterLen">
    <th style='border-top: none'>Regional:</th>
    <td style='border-top: none'>
      <ul>
        <template v-for='item in ec'>
          <li>{{item["Extraction Criteria"]}}</li>
        </template>
      </ul>
    </td>
  </tr>
  <tr v-else>
  Nothing present
  </tr>
 </tbody>
</table>
</div>

如果v-for嵌套在表格单元格中，如何隐藏整个表格行？

1 个答案: