Element in VueJS template reference self

Question

I have a component which will have many div elements, with only one having an 'active' class on click. I'm trying to bind the 'active' class if a variable 'activeSlide' is equal to the element.

v-bind:class="{ 'active': activeSlide === ?? }"

I'm just not sure what the ?? should be. I haven't been able to find anything that tells how an element can reference itself. Or maybe there is a better approach?

My Code in .vue component file:

<template>
  <div v-on:click="show" v-bind:class="{ 'active': activeSlide === ?? }"></div>
</template>

<script>
  export default {
    data() {
        return {
            activeSlide: null
        }
    }
    methods: {
       show: function(e) {
           this.activeSlide = e.target;
       }
    } 
}
</script>

TJ Weems · Accepted Answer · 2019-11-27 17:53:00Z

1

I would assume that the ?? is intended to be something uniquely identifying to the active element.

<template>
  <div v-on:click="show('Slide1')" v-bind:class="{ 'active': activeSlide === 'Slide1' }"></div>

  <div v-on:click="show('Slide2')" v-bind:class="{ 'active': activeSlide === 'Slide2' }"></div>
</template>

<script>
  export default {
    data() {
        return {
            activeSlide: null
        }
    }
    methods: {
       show: function(value) {
           this.activeSlide = value;
       }
    } 
}
</script>

So basically when you click the slide it will change the activeSlide property to the value passed into the v-on:click method.

There are more dynamic ways of doing this such as if you were to loop through a series of elements you could then compare the active index to the index of the element instead of explicitly saying Slide1 or Slide2.

Here is a dynamic example

<template>
  <div v-for="slide in slides" :key="slide.id" v-on:click="show(slide.id)" v-bind:class="{ 'active': activeSlide === slide.id }"></div>
</template>

<script>
  export default {
    data() {
        return {
            activeSlide: null
        }
    }
    methods: {
       show: function(value) {
           this.activeSlide = value;
       }
    } 
}
</script>

so you can use any available data in the iteration to compare, just pass in slide.whatever to the method and set the class to equal the same thing.

edited Nov 27, 2019 at 17:53

answered Nov 27, 2019 at 17:29

TJ Weems

1,1143 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Justin D Over a year ago

This would be a way to do it. It will be dynamic, because the slides will be populated from an array. However, a slide's index could change. If the user moves a slide in the view it will update the array, which is why I was looking to see if possible to reference the element itself. Because a user can switch between multiple presentations, the identifier here would need to be so unique that no other slide would have it.

TJ Weems Over a year ago

@JustinD, if your looping through an array it doesn't have to be the index. I mean I don't know what your array of data looks like but I will post an example.

Justin D Over a year ago

No, I get that. I just though that it could be simpler than coming up with a unique identifier, where I could reference the element itself.

TJ Weems Over a year ago

@JustinD, well you would have trouble accessing the elements attributes for the v-bind:class. I would rely on the data to be the unique identifier if possible. Added an update with new dynamic example.

Justin D Over a year ago

Your example will work. Just to clarify, I was trying to access the element itself... $this or the like. Didn't know if it was possible in Vue.

|

Collectives™ on Stack Overflow

Element in VueJS template reference self

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related