vue中点击列表数据展开收起,利用v-for 渲染,先把状态值存储起来
``![点击收起展开,只有一个能展开,其他都收起](https://img-blog.csdn.net/20180823141533508?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1MDg2Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70...
·
**html**
<div class="help-info">
<ul>
<li class="help-list" v-for="(item, index) in help" :key="item.id" @click="helpShow(index)">
<span class="circle"></span>
<span class="name font-14 font-darkGray">{{ item.title }}</span>
<span v-if="item.helpFlag" class="arrows arrows2"></span>
<span v-else class="arrows arrows1"></span>
<div class="help-list-info font-grey" v-if="item.helpFlag">
<p class="font-12 font-grey item-content">
{{ item.content }}
</p>
<div class="ifHelp font-12">
<p class="helpful" :class="{'helpful-active': item.helpful }"
<span class="bg-contain"></span>有帮助的
</p>
<p class="no-helpful" :class="{'no-helpful-active': item.nohelpful }"
<span class="bg-contain"></span>没帮助,去反馈
</p>
</div>
</div>
</li>
</ul>
</div>
**js**
getData () {
var that = this
if (that.problemState == 1) {
that.helpType = 2
that.helpShowNum=null
} else {
that.helpType = 1
that.helpShowNum=null
}
network(CONFIG.help, {'type': that.helpType}).then((res) => {
if (res.head.code == 0) {
var help = res.details.questions // 先用一个变量接收对象
help.forEach((item)=>{
item.helpful = false
item.nohelpful = false
item.helpFlag = false // 给一个对象赋值一个属性
})
that.help = help // 把变量赋值给全局变量
}
})
},
// 展开收起
helpShow (index) {
var that = this
var listData = that.help
var helpFlag = that.help[index].helpFlag // 先用一个变量接收一个原来的状态值
listData.forEach((item) => { //循环已经把所有的状态值清空了
item.helpFlag = false
})
//(比如我当前点击的这个是打开的状态,他是true,点击的方法开始先把这个true存下来,然后接下来的循环是把所有的状态值设为false,如果你不存下来的话,你 !状态值永远为true)
listData[index].helpFlag = !helpFlag
that.help = listData
},
// 有帮助的和没帮助的
ifHelp (state, id, index) {
console.log('state', state)
console.log('id', id)
var that = this
that.askData.questionId = id
that.askData.helpState = state
console.log('askData', that.askData)
network(CONFIG.ruleCountTools, that.askData).then((res) => {
if (state == 1) {
Vue.toast('感谢您的反馈',{duration:1500})
that.help[index].helpful=true
that.help[index].nohelpful=false
}else if (state == 0) {
that.help[index].helpful=false
that.help[index].nohelpful=true
location.href = "#/self/suggestion"
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)