[英]Toggle Class for an item Vue.js
So I have a list of data brought in using vue resource from an api. 因此,我有一个使用API的vue资源引入的数据列表。 I'm trying to integrate this list with bootstrap accordion.
我正在尝试将此列表与Bootstrap手风琴集成。
So: 所以:
I have set this : 我已经设置了:
data: {
taller: false
}
and 和
<div class="panel panel-default"
v-repeat="faq: faqs | filterBy searchText"
v-transition="staggered"
stagger="200"
v-on="click: toggleHeight"
v-class="active: taller">
So on click i'll call toggleHeight and pass through the faq instance : 因此,在单击时,我将调用toggleHeight并通过常见问题实例:
toggleHeight: function(faq) {
this.taller = true;
}
This function sets to taller to true however it sets it to true for all faq items, not just the one i've passed to toggle height. 该函数将aller设置为true,但是将所有常见问题项都设置为true,而不仅仅是我为切换高度而传递的项目。
How can I only return taller: true
for clicked faq item? 我如何才能只返回
taller: true
单击的常见问题解答是否为taller: true
?
Thanks 谢谢
<div id="demo">
<div class="input-group">
<input class="form-control" v-model="searchText">
</div>
<script id="item-template" type="x-template">
<div
class="stag"
v-on="click: toggleHeight()"
v-class="active: taller"
>
<h3>{{ item.question }}</h3>
<h4>{{ item.answer }}</h4>
</div>
</script>
<question
v-repeat="item: items | filterBy searchText"
v-transition="staggered"
stagger="200">
</question>
</div>
</div>
and the js: 和js:
Vue.component('question', {
template: document.querySelector('#item-template'),
data: function() {
return {
taller: false
}
},
methods: {
toggleHeight: function() {
this.taller = ! this.taller
}
}
});
new Vue({
el: '#demo',
ready: function() {
this.fetchItems();
},
methods: {
fetchItems: function() {
this.$http.get('/dev/frequently-asked-questions/api/index', function(items) {
this.$set('items', items);
});
}
}
});
Had to make use of components to target each item more directly. 必须利用组件来更直接地定位每个项目。
First of all, you only have one variable taller
. 首先,您只有一个
taller
变量。 Not one per faq. 每个常见问题解答中没有一个。 So you'd have to change it a bit to something like this:
因此,您必须将其更改为如下所示:
new Vue({
el: '#faq-list',
data: {
faqs: [{id:'foo',taller:false},{id:'bar',taller:true}]
},
methods: {
toggleHeight: function (faq, ev) {
faq.taller = false;
ev.target.classList.add('active');
}
}
});
And your HTML to something like this: 而您的HTML就像这样:
<div id="faq-list">
<div class="panel panel-default"
v-repeat="faq: faqs"
v-on="click: toggleHeight (faq, $event)"
v-class="active: taller">
{{ faq.id }}</div>
</div>
And for fun, I added CSS to see things working: 有趣的是,我添加了CSS以查看其工作情况:
.active {
color: red;
}
Here's the JSfiddle , for your reference and to mess around with it. 这是JSfiddle ,供您参考并弄乱它。 Click on one of the items in the list and it turns red.
单击列表中的一项,它变为红色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.