VueJs - Dropdown list

Question

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.

                         
                        
                          
                            
                              
                                  
                                  
                                    {{ item.name }}
                                    {{ item.price }}
                                  
                                
                            
                          
                        

                         
                        
                          
                            
                              
                                  
                                  
                                    {{ item.name }}
                                    {{ item.price }}
                                  
                                
                            
                          
                        

                         
                        
                          
                            
                              
                                  
                                  
                                    {{ item.name }}
                                    {{ item.price }}

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

Nikola Pavicevic · Answer

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]
  }
})




  
    
      
    
    
      
        
          
            
              
              
                {{ item.name }}
                {{ item.price }}

VueJs - Dropdown list

1 Answers