laravel - 使用 Vue Js 和 Bootstrap 展开折叠图标
问题描述
我有一个带有展开折叠面板的 Bootstrap 手风琴,效果很好。但是当扩展它应该显示减号图标,这对我来说效果不佳。当我单击展开时,所有面板的图标都更改为减号,而不仅仅是更改展开的那个。我在 Vue JS 模板中有我的代码,如下所示
我正在调用切换功能 onclick 来切换图标,但它也适用于所有其他面板。
我怎样才能解决这个问题?提前致谢。
Vue.component('accordion', {
data: function () {
return {
alerts: [],
sound: '',
collapsed:true
}
},
template: `
<div>
<div v-for="(alert, index ) in alerts" class="panel panel-default">
<div class="panel-heading" v-bind:style="'background-color:'+alert.color" role="tab" v-bind:id="'heading'+index" >
<a role="button" data-toggle="collapse" data-parent="#accordion"
v-bind:href="'#collapse'+index" aria-expanded="true" v-on:click="toggle">
<i id="collapseExpand" v-show="collapsed" class="more-less fa fa-plus"></i>
<i id="collapseExpand" v-show="!collapsed" class="more-less fa fa-minus"></i>
<h4 class="panel-title">@{{ alert.description }}</h4></a>
</div>
<div v-bind:id="'collapse'+index" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>@{{ alert.comment }}</div>
<div class="row">
<form v-bind:id="'form_'+index" v-bind:name="'form_'+index" v-bind:action="route" method="POST" style="display: inline;">
<input type="hidden" name="_token" :value="csrf">
<input type ="hidden" v-bind:id="'trigger_id_'+alert.triggerid" name = "trigger_id" v-bind:value="alert.triggerid">
<div class="col-lg-12">
<div class="input-group">
<input type="text" v-bind:id="'ack_msg_'+alert.triggerid" name="ack_msg" class="form-control"
placeholder="Acknowledge Message...">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Save</button>
</span>
</div>
</div>
</form>
</div>
</div>
<div class="panel-footer">@{{ alert.timestamp }}</div>
</div>
</div>
<input type="hidden" id="audioFile" name="audioFile" v-bind:value="sound">
</div>`,
mounted: function () {
this.loadData();
setInterval(function () {
this.loadData();
}.bind(this), 1000);
},
methods: {
loadData: function () {
$.get('{{ route('getAlertsPersistent') }}', function (response) {
this.alerts = response;
this.sound = this.alerts[0].sound
}.bind(this));
},
toggle(){
this.collapsed = !this.collapsed ;
}
},
});
new Vue({el: '#accordion'});
解决方案
您想要分离您想要循环的手风琴项目。通过这种方式,您可以在每个组件中拥有独立的状态。
<div>
<accordion-item
v-for="(alert, index) in alerts"
:alert="alert"
:key="index">
</accordion-item>
</div>
在你里面<accordion-item/>
你应该collapsed
在你里面data
另一种方法是将切换的项目存储在数组中。
export default {
data: () => ({
toggled: []
}),
methods: {
isActive (item) {
return this.toggled.indexOf(item) >= 0
},
toggleItem (item) {
const index = this.toggled.indexOf(item)
if (index >= 0) {
this.toggled.splice(index, 1)
return
}
this.toggled.push(item)
}
}
}
所以你现在可以按如下方式使用它
<a
role="button"
data-toggle="collapse"
data-parent="#accordion"
v-bind:href="'#collapse'+index"
aria-expanded="true"
v-on:click="toggleItem(index)">
<i
:class="[isActive(index) ? 'fa-minus' : 'fa-plus']"
class="more-less fa"></i>
<h4 class="panel-title">@{{ alert.description }}</h4>
</a>
顺便说一句,您正在循环,id=collapseExpand
这会导致您出现问题。而是尝试:id="'collapseExpand' + index"
推荐阅读
- python - 如何在 html 文件中使用 Jinja 标签自动包装语句
- c++ - 如何在 C++ 中将另一个类引用到另一个类中?
- compiler-errors - 尝试在我的 shopify 商店上安装应用程序时出错
- javascript - JavaScript 中的录音问题,一些录音丢失
- c# - ImageSource 已在 Collection View 中加载闪烁
- c - 每当我使用扩展 ascii(unsigned char) 时,Printf 都会显示这个
- python - Heroku 芹菜工人坠毁
- html - 如何移动
- node.js - 如何通过 kubernetes 将变量传递给 Reactjs
- influxdb-2 - 在 influxdb2 上使用 CLI 配置 Scraper