How to pass vuejs element instance by reference

3884 views javascript
7

Ok it looks like its a really simple question, but i can't figure it out. I have a vuejs project in which i have this component code:

   <div>
     <v-chip @click="chip_active(// pass the reference //)" 
     color="#E0E0E0" class="white--text" 
     v-for="single_interest in interest" :key="single_interest">
     {{ single_interest }}
     </v-chip>
   </div>

So in the click method i need to change the property color of one single instance of the chip element (the one clicked), not the hole v-for chips. To do this i thought of passing the chip instance reference and change the property color directly from the method, the problem is that i don't know how to do this on vuejs. Anyone who can help me with this? Thanks!

answered question

1 Answer

2

So i would approach this like this, keeps the concerns more separate

  • on each of the chips, have a selected that is false by default
  • add an @click=setSelected(chip)
  • in your setSelected, set the value of the one selected to be true and the others to be false

If you don't want to set a value on the chips you could also keep a completely separate variable that is selectedChip that holds the value of the selected chip. You setSelected would then change the value of selectedChip. You would also need to pass selectedChip into your loop so that you can handle the display if the current chip is selected

posted this

Have an answer?

JD

Please login first before posting an answer.