twitter-bootstrap Vue.js 项目的切换类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31094217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Class for an item Vue.js
提问by Stefkay
So I have a list of data brought in using vue resource from an api. I'm trying to integrate this list with bootstrap accordion.
所以我有一个使用 api 中的 vue 资源引入的数据列表。我正在尝试将此列表与引导手风琴集成。
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.
此函数将较高设置为 true，但它会将所有常见问题解答设置为 true，而不仅仅是我传递给切换高度的那个。
How can I only return taller: truefor clicked faq item?
我怎样才能只返回taller: true点击的常见问题项目？
Thanks
谢谢
回答by Stefkay
<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.
不得不使用组件来更直接地定位每个项目。
回答by Nate Ritter
First of all, you only have one variable taller. Not one per faq. So you'd have to change it a bit to something like this:
首先，你只有一个变量taller。每个常见问题都没有。所以你必须把它改成这样：
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. Click on one of the items in the list and it turns red.
这是JSfiddle，供您参考并使用它。单击列表中的项目之一，它会变成红色。
