Toggle Class for an item Vue.js

Question

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.

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

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

Thanks

Stefkay · Accepted Answer · 2015-07-01 10:24:33Z

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

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.

Nate Ritter · Accepted Answer · 2015-06-29 10:20:59Z

0

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:

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:

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

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

edited Jun 29, 2015 at 10:20

answered Jun 29, 2015 at 10:02

Nate Ritter

2,4864 gold badges21 silver badges28 bronze badges

5 Comments

Stefkay Over a year ago

Hey, thanks for your answer. Problem I have is that data: { } is brought through via an api, and captured using vue resource. I can't append taller to each data item.

Nate Ritter Over a year ago

Then that item is effectively singular and/or global. It doesn't relate to individual data points. There's only one of them. When you get it from an API, do you have a "taller" attribute for each FAQ? Or is it intended to be just one variable?

Stefkay Over a year ago

I do not have the taller attribute for each FAQ, it is intended to be just one variable.

Nate Ritter Over a year ago

Then I'm confused why you would think you'd be able to change it for just one faq. It would apply to all.

Stefkay Over a year ago

I've sorted it, please see new answer, thanks for your help though.

Collectives™ on Stack Overflow

Toggle Class for an item Vue.js

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related