切换项目Vue.js的类 [英] Toggle Class for an item Vue.js

问题描述

所以我有一个使用api中的vue资源引入的数据列表。我正在尝试将此列表与bootstrap手风琴集成。

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.

所以：

我设置了这个：

data: {
  taller: false
}

和

<div class="panel panel-default"
  v-repeat="faq: faqs | filterBy searchText" 
  v-transition="staggered" 
  stagger="200"
  v-on="click: toggleHeight"
  v-class="active: taller">

所以点击我会调用toggleHeight并通过faq实例：

So on click i'll call toggleHeight and pass through the faq instance :

toggleHeight: function(faq) {
  this.taller = true;
}

此函数设置为更高为true但是它将所有常见问题设置为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 对于点击的常见问题解答项目？

How can I only return taller: true for clicked faq item?

谢谢

推荐答案

<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>

和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.

这篇关于切换项目Vue.js的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！