我想显示/隐藏我的表格数据。当我选中复选框,然后在单击按钮后单击时,我想隐藏它们,反之亦然。
我能够将复选框值作为数组放置到另一个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
})
},
}
})
最佳答案
如果我正确地理解了您,则希望切换每行的可见性以及取消隐藏所有隐藏项的可能性。
为此,您应该给每个项目一个布尔标志(如果当前不可见)。
您可以将其作为属性直接存储在数据中的每个项目上,也可以根据索引(如果是排序后的数据)创建数组,或者如果项目的类别恰好发生变化,则根据地图创建数组。
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
关于javascript - 根据Vue JS中的所选复选框显示/隐藏表数据和“隐藏/显示”按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57270019/