CODEWITHSUNDEEP
vue.js
Somosfeer
Somosfeer

Reputation: 72

Multiple button toggle without using routes

I've built a two button toggle using v-on:click that renders a specific data object on click, while removing the previously clicked object. I would like to continue this functionality with multiple data objects, so I could have numerous buttons and respective objects. I would like to achieve this without using routing but I am unsure of the best way.

Codepen - https://codepen.io/somosfeer/pen/xNMZbx

I'm assuming I should be using binding, but I was unable to have a variable dynamically update depending on the which button is clicked.

So Ideally the buttons would be like: 
 <h1><button v-on:click="data_object_one = "active">Super 
 Mario Object Data 1 </button></h1>

<h1><button v-on:click="data_object_two = "active">Super 
Mario Data Object 2 </button></h1>

<h1><button v-on:click="data_object_three = "active">Super 
 Mario Data Object 3 </button></h1>

And so on for as many buttons and data objects that I would want to include. I've tried to create a dynamic variable that was updated by the user click, however I was never able to get the variable to work with my other functions.

Hopefully the code pen illustrates what I'm trying to achieve. Basically I want that same functionality but with lots of buttons. Not asking for someone to do this for me, just a clear direction that I can pursue to achieve this.

Upvotes: 1

Views: 216

Answers (1)

Dan
Dan

Reputation: 63059

You are building something similar to an Accordion component.

What's needed is to store your toggle data sets in a larger list, along with an activeIndex property in your app data. In your template, you would iterate through the list's objects, using v-if or v-show to test whether the data should be shown. This would be dependent on whether any object's list index matches activeIndex. You set activeIndex through a click handler when a button is clicked. This may seem complicated because there are major structural issues with your code. I recommend learning Vue more because your codepen is not formed well:

1) You should have only 1 instance of new Vue rather than splitting your app into multiple apps.

2) You'll want to use a reusable component for the toggle sets rather than retype and recreate the same functionality repeatedly in your template and your code. Generally, you want to avoid violating the DRY (Don't Repeat Yourself) maxim of programming. A component-based framework like Vue intends to solve this by using components.

3) You can use component props to pass the data for each set to its component.

4) You also don't want to have to manually type out the component code in the template in every place that you want the next component, when you can use a list instead. This is the idea behind v-for: generating repeated template content based on a list.

So, you'll want to create a larger array that holds a list of all of your toggle set data, which you can then iterate using v-for, creating a toggle component in each iteration. Something like this:

<div id="app">
  <div v-for="(info, index) in mydata">
    <button @click="setActive(index)">
      {{ info.title }}
    </button>
    <div v-show="index == activeIndex">
      <Toggle :info="info" />
    </div>
  </div>
</div>

Upvotes: 1

Related Questions