Javascript 根据vue js中选中的复选框和隐藏/显示按钮显示/隐藏表格数据_Javascript_Vuejs2

Javascript 根据vue js中选中的复选框和隐藏/显示按钮显示/隐藏表格数据

javascript vuejs2

Javascript 根据vue js中选中的复选框和隐藏/显示按钮显示/隐藏表格数据,javascript,vuejs2,Javascript,Vuejs2,我想显示/隐藏我的表数据。当我选中复选框并单击按钮后打开时，我想隐藏它们，反之亦然我可以将复选框值作为数组放到另一个非活动列表中，但不能绑定到按钮这是我的组件文件 <button class="btn btn-lg btn-primary" v-on:click="seen(inactiveList)">hide/show</button> <table class="row-border hover"> <tr>

我想显示/隐藏我的表数据。当我选中复选框并单击按钮后打开时，我想隐藏它们，反之亦然

我可以将复选框值作为数组放到另一个非活动列表中，但不能绑定到按钮

这是我的组件文件

<button class="btn btn-lg btn-primary"   v-on:click="seen(inactiveList)">hide/show</button>

  <table class="row-border hover">
    <tr>

               <th>Id</th>
                <th>Title</th>
                <th>UserId</th>
                <th>Change Detail</th>
                <th>Add Detail</th>

    </tr>

            <tr v-for = "(item,index) in paginate " :key= "index">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.userId}}</td>
                <td><button class="btn btn-primary" >Edit</button></td>
                <td><button class="btn btn-primary" >Add</button></td>
                <td> <input type="checkbox" name="vehicle1"
                     v-on:change="list"  v-bind:value="item" v-model="inactiveList"><br></td>

    </tr>

</table>

 <ul>
    <li v-for="pageNumber in totalPages" v-if="Math.abs(pageNumber - currentPage) < 3
     || pageNumber == totalPages || pageNumber == 1">
    <a v-bind:key="pageNumber" href="#" @click="setPage(pageNumber)" 
    :class="{current: currentPage === pageNumber,
     last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3),
     first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }}</a>
    </li>
</ul>

    </div>


  export default {
        name: 'component2',

        data(){

            return{

             currentPage: 1,
            itemsPerPage: 10,
            resultCount: 0,
            inactiveList:[],
            selected:false,

            }
        },
        computed: {

            ...mapState([

                'posts',
                'loading'
            ]),

           totalPages: function() {
          return Math.ceil(this.resultCount / this.itemsPerPage)
        },

           paginate: function() {
               debugger

            if (!this.posts || this.posts.length != this.posts.length) {
                return
            }
            this.resultCount = this.posts.length
            if (this.currentPage >= this.totalPages) {
              this.currentPage = this.totalPages
            }
            var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
            return this.posts.slice(index, index + this.itemsPerPage)
        },

           },

        methods: {         

             setPage: function(pageNumber) {
          this.currentPage = pageNumber
        }, 

       list: function(){

         if(this.selected==false)
         {
          this.paginate.push= this.inactiveList;
           return  this.inactiveList
         }
       },

         seen: function(inactiveList){


        var index = this.inactiveList.length;

        for(var i=0;i<index;i++)
        {
          this.inactiveList[i].id;
          console.log(inactiveList[i].id)

        }

            },      
         },

        mounted() {
         this.$store.dispatch('loadPost');

        },


          }

</script>

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios";


Vue.use(Vuex,axios);

export const store = new Vuex.Store({

    state: {

        posts:[],
        loading: true

    },

    mutations:{       

    set_post(state,posts){

        state.posts=posts;
    },

    changeLoadingState(state, loading) {
        state.loading = loading
    }

},

   actions:{

   loadPost({commit})
   {
    axios
    .get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      let post = response.data
      console.log(post)
      commit('set_post',post);
      commit('changeLoadingState', false)
    })
    .catch(error => {
      console.log(error)
      this.errored = true
    })
   },

}

  })

如果我正确地解除了对您的锁定，您希望切换每一行的可见性以及取消隐藏所有隐藏项的可能性

要做到这一点，您应该给每个项目一个布尔标志，如果它当前可见或不可见。您可以将其作为属性直接存储在每个项目的数据中，或者，如果是排序数据，则可以基于索引创建一个数组，如果项目的排序发生了变化，则可以创建一个映射

data() {
    return {
      useVisibility: false,
      items: {} // id -> item
    };
},

不要忘记填充有关此示例代码的映射

现在，由于您已经提供了状态，您必须将输入绑定到每个项布尔标志

<input type="checkbox" name="item.name"  @change="setVisibility(item.id, $event)" :value="item.visible" />

如果您不知道我为什么在这里使用Vue.set，请阅读反应性系统。但也许有更好的方法来更新标志

要取消隐藏所有隐藏项，只需迭代所有项，并使用v-on:click处理程序将可视标志设置为true

编写计算属性以获取可见项的列表

computed: {
   visibleItems() {
      if (this.useVisibility) {
          // filter unchecked boxes
          return Object.values(this.items).filter(item => item.visible)
          // to filter checked boxes use the invert
          // return Object.values(this.items).filter(item => !item.visible)
      } else {
          return Object.values(this.items)
      }
   }
}

并使用v-for渲染列表。注意。使用项目的id，以便VDOM可以正常工作

<tr v-for="(item, index) in visibleItems" :key="item.id">
   ...
   <input type="checkbox" name="item.name"  @change="setVisibility(item.id, $event)" :checked="item.visible" />
</tr>

...

隐藏/显示所有选中项的按钮

<button @click="useVisibility = !useVisibility"/>

请参见此

如果我正确地解除了对您的锁定，您希望切换每行的可见性以及取消隐藏所有隐藏项的可能性

data() {
    return {
      useVisibility: false,
      items: {} // id -> item
    };
},