How to display and hide the data bound with v-for in Vue

how can you hide and display

  • according to the attribute value of acton by clicking on different < tr >? I would like to ask for your advice, thank you 

    <div class="hello">
    <ul>
      <li @click="all">all</li>
      <li></li>
      <li></li>
    </ul>
    <table>
      <tr v-for="item in items">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>
  </div>
  
  return {
      items:[
        {
          id:"A2345",
          action:""
        },
        {
          id:"B638",
          action:""
        },
        {
          id:"C863",
          action:""
        }]
    }
    • Vue.js javascript
    Mar.24,2021 
    <template>
  <div>
    <ul>
      <li v-for="item in li" @click="active = item">{{item}}</li>
    </ul>
    <table>
      <tr v-for="item in items" v-if="item.action == active || active == 'all'">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        active: 'all',
        li: ['all', '', ''],
        items:[
          {
            id:'A2345',
            action:''
          },
          {
            id:'B638',
            action:''
          },
          {
            id:'C863',
            action:''
          }]
      }
    }
  }
</script>

<style lang="stylus" scoped>

</style>
        <table>
      <tr v-for="(item,index) in items" :key="index" v-if="item.action==''">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>

    can be implemented in many ways by referring to the following code. It is suggested that the landlord read more documents, and this problem will be solved naturally. 

    <div class="hello">
  <ul>
    <li @click="select('all')">all</li>
    <li @click="select('unactive')"></li>
    <li @click="select('active')"></li>
    ...
  </ul>
  <table>
    <tr v-for="(item, index) in items" :key="index" v-if="currentType !== item.action">
      <td>{{item.id}}</td>
      <td>{{item.action}}</td>
    </tr>
  </table>
</div>


data() {
  return {
    items:[
      {
        id:'A2345',
        action:''
      },
      {
        id:'B638',
        action:''
      },
      {
        id:'C863',
        action:''
      }],
    currentType: 'all'
  }
},
methods: {
  select(type) {
    if (type === 'all') {
      this.currentType = ''
    } else if (type === 'active') {
      this.currentType = ''
    } ...
  }
}

    use computed to Filter items

    template 

        <ul>
      <li @click="action=''">all</li>
      <li @click="action=''"></li>
      <li @click="action=''"></li>
    </ul>
    <table>
      <tr v-for="item in filterItems">
        <td>{{item.id}}</td>
        <td>{{item.action}}</td>
      </tr>
    </table>

    script 

                data() {
                return {
                    action: ''
                }
            },
            computed() {
                filterItems() {
                    return this.items.filter(item => item.action.includes(this.action)
                    }
                }
            })

    pseudocode makes do.

    clipboard.png

    Previous: Regular expression: you can enter numbers, English case, and underscores, but the sliding line can only be 0 or 1, and the total length is in the range of [2JI 32].

    Next: Resolution of icon of tray in electron

    css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
    © 2021 CodesHelper
    Advertising Contact us About us
    Menu