Hello i'm doing a dropdown in my website and i'm really new in Vue. I'm using conditional rendering for display some cards. Something like: Cars, Motos, Bikes. When i click on Cars there is a dropdown and i get a list of cars, same on others.

                        <h2 ><button v-on:click="toggle = !toggle" >Cars</button></h2> 
                        <div v-if="toggle" >
                          <div >
                            <div >
                              <div v-for="item in cars" ::key="item.id"  style="width: 10rem;">
                                  <img :src="'./images/cars/img'   item.img   '.png'"  alt="item.name">
                                  <div >
                                    <h4 >{{ item.name }}</h4>
                                    <p >{{ item.price }}</p>
                                  </div>
                                </div>
                            </div>
                          </div>
                        </div>

                        <h2 ><button v-on:click="toggle = !toggle" >Motos</button></h2> 
                        <div v-if="toggle" >
                          <div >
                            <div >
                              <div v-for="item in motos" ::key="item.id"  style="width: 10rem;">
                                  <img :src="'./images/motos/img'   item.img   '.png'"  alt="item.name">
                                  <div >
                                    <h4 >{{ item.name }}</h4>
                                    <p >{{ item.price }}</p>
                                  </div>
                                </div>
                            </div>
                          </div>
                        </div>

                        <h2 ><button v-on:click="toggle = !toggle" >Bikes</button></h2> 
                        <div v-if="toggle" >
                          <div >
                            <div >
                              <div v-for="item in bikes" ::key="item.id"  style="width: 10rem;">
                                  <img :src="'./images/bikes/img'   item.img   '.png'"  alt="item.name">
                                  <div >
                                    <h4 >{{ item.name }}</h4>
                                    <p >{{ item.price }}</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

My script:

const app = new Vue({
el: '#app',
data: {
    show: false,
    cars: [{data}],
    motos: [{data}],
    bikes: [{data}],
},
})

But when i click on Motos it only closes Cars. How to make it dynamic? Like if i press Motos then it opens and Cars closes, same for Bikes

CodePudding user response：

You can merge your vehicles data in mounted hook, then loop thru items:

const app = new Vue({
  el: '#demo',
  data: () => ({
    items: [],
    expanded: null,
    cars: [{img: '', name: 'car1', price: 5}, {img: '', name: 'car2', price: 6}, {img: '', name: 'car3', price: 8}],
    motors: [{img: '', name: 'motor1', price: 5}, {img: '', name: 'motor2', price: 6}, {img: '', name: 'motor3', price: 8}],
    bikes: [{img: '', name: 'bike1', price: 5}, {img: '', name: 'bike2', price: 6}, {img: '', name: 'bike3', price: 8}]
  }),
  methods: {
    expand(idx) {
      this.expanded = this.expanded === idx ?  null : idx
    }
  },
  mounted() {
    const car = {title: 'Cars', products: this.cars}
    const motor = {title: 'Motors', products: this.motors}
    const bike = {title: 'Bikes', products: this.bikes}
    this.items = [car, motor, bike]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="demo" >
  <div v-for="(group, index) in items" :key="index">
    <h2 >
      <button @click="expand(group)" >{{ group.title }}</button>
    </h2>
    <div >
      <div >
        <div >
          <div v-if="expanded === group">
            <div v-for="(item, idx) in group.products" :key="idx"  style="width: 10rem;">
              <img :src="'./images/motos/img'   item.img   '.png'"  :alt="item.name">
              <div >
                <h4 >{{ item.name }}</h4>
                <p >{{ item.price }}</p>
              </div>
            </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>