Question

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

我能够将复选框值作为数组放置到另一个inactiveList中，但不能绑定到按钮。

这是我的组件文件.....

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

这是我的store.js文件.....

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
    })
   },

}

  })

Answer 1

如果我正确地理解了您的意思，则希望切换每行的可见性以及取消隐藏所有隐藏项的可能性。

为此，应为每个项目提供一个布尔标志（如果当前不可见）。您可以将其作为属性直接存储在每个项目的数据中，或者如果索引是排序后的数据，则根据索引创建一个数组；如果项目的类别恰好发生变化，则可以基于地图创建一个数组。

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

请不要忘记填写有关此示例代码的地图。

现在，当您提供状态时，必须将输入绑定到每个项目的布尔标志

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

提供一种更改可见性标记的方法

 setVisibility(id, event) {
    Vue.set(this.items, id, { ...this.items[id], visible: event.target.checked})
 }

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

要取消隐藏所有隐藏项目，您只需要遍历所有项目并使用v-on：click处理程序将visible标志设置为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"/>

查看此demo

根据Vue js中的选定复选框显示/隐藏表数据和“隐藏/显示”按钮

1 个答案: