Javascript 切换项目Vue.js的类

因此，我有一个从api使用vue资源引入的数据列表。我正在尝试将这个列表与引导手风琴结合起来

因此：

我已经确定了这一点：

data: {
  taller: false
}

及

此函数将“更高”设置为true，但它将所有常见问题解答项目设置为true，而不仅仅是我传递给“切换高度”的项目

如何仅为单击的常见问题解答项目返回

较高的：true

---

谢谢

首先，您只有一个变量。不是每个常见问题都有一个。所以你必须把它改成这样：

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');
        }
    }
});

将您的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>

这是我的建议，供你参考和处理。单击列表中的一个项目，它将变为红色

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

---

必须利用组件更直接地针对每个项目。

嘿，谢谢你的回答。我遇到的问题是：{}数据是通过api传递的，并使用vue资源捕获的。我不能在每个数据项上附加更高的值。那么该项实际上是单数和/或全局的。它与单个数据点无关。只有一个。当您从API获得它时，每个FAQ是否都有一个“更高”的属性？或者它只是一个变量？我没有为每个FAQ设置更高的属性，它只是一个变量。然后我很困惑为什么你会认为你可以为一个FAQ更改它。这将适用于所有人。我已经整理好了，请看新的答案，谢谢你们的帮助。

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

.active {
    color: red;
}

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

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);
                });

            }

        }

    });