``Incorporating Vue.js: A Guide to Emphasizing the Chosen Selection from Numerous Lists

Question

``Incorporating Vue.js: A Guide to Emphasizing the Chosen Selection from Numerous Lists

I am currently utilizing Vue.js and have multiple lists displayed, but I only wish to select and highlight one element at a time. Currently, every click results in multiple items being highlighted. I hope that explanation is clear. Below are the snippets of my code:

<template>
 <div>
    <div class='list-group'>
      <a v-for='(product, idx) in adslCapped' class='list-group-item'
         v-on:click='toggleActiveIndex(idx)' 
         :class="{'active': idx == activeIndex}" >
      {{product.name}}
      </a>
    </div>


    <div class='list-group'>
       <a v-for='(product, idx) in fibre' class='list-group-item'
          v-on:click='toggleActiveIndex(idx)' 
          :class="{'active': idx == activeIndex}" >
       {{product.name}} 
       </a>
    </div>
  </div>
</template>


    data: {
      activeIndex: null
    },
    methods: {
       toggleActiveIndex: function(index){
         this.activeIndex = index
       }
    }

As you can observe, there are two lists, but when I click on the first item of the first list, it highlights the first item in both lists. Please be aware that these snippets represent the issue I am facing.

javascript vue.js

Answer 1

Answer №1

If you want to highlight only one item in all the lists within your current app structure, consider adding a new variable that will represent the active list.

Then, adjust the condition for applying the active class by checking if the index matches the active index and if the list matches the active list.

HTML

<div id="app">
  <div class='list-group'>
  <a v-for='(product, idx) in adslCapped' class='list-group-item'
     v-on:click='toggleActiveIndex(adslCapped, idx)' 
     :class="{'active': idx == activeIndex && adslCapped == activeList}" >
  {{product}}
  </a>
  </div>


  <div class='list-group'>
     <a v-for='(product, idx) in fibre' class='list-group-item'
        v-on:click='toggleActiveIndex(fibre, idx)' 
        :class="{'active': idx == activeIndex && fibre == activeList}" >
     {{product}} 
     </a>
  </div>
</div>

Script

new Vue({
  el: "#app",
  data() {
    return {
      activeIndex: null,
      activeList: null,
      adslCapped: ['a', 'b', 'c'],
      fibre: ['1244', '125215', '02150']
    }
  },
  methods: {
   toggleActiveIndex: function(list,index){
     this.activeIndex = index;
     this.activeList = list;
   }
  },
})

Check out the demo here

I hope this solution proves helpful!

Answer 2

If you want to highlight only one item in all the lists within your current app structure, consider adding a new variable that will represent the active list.

Then, adjust the condition for applying the active class by checking if the index matches the active index and if the list matches the active list.

HTML

<div id="app">
  <div class='list-group'>
  <a v-for='(product, idx) in adslCapped' class='list-group-item'
     v-on:click='toggleActiveIndex(adslCapped, idx)' 
     :class="{'active': idx == activeIndex && adslCapped == activeList}" >
  {{product}}
  </a>
  </div>


  <div class='list-group'>
     <a v-for='(product, idx) in fibre' class='list-group-item'
        v-on:click='toggleActiveIndex(fibre, idx)' 
        :class="{'active': idx == activeIndex && fibre == activeList}" >
     {{product}} 
     </a>
  </div>
</div>

Script

new Vue({
  el: "#app",
  data() {
    return {
      activeIndex: null,
      activeList: null,
      adslCapped: ['a', 'b', 'c'],
      fibre: ['1244', '125215', '02150']
    }
  },
  methods: {
   toggleActiveIndex: function(list,index){
     this.activeIndex = index;
     this.activeList = list;
   }
  },
})

Check out the demo here

I hope this solution proves helpful!

Answer 3

Answer №2

Although it may seem like overkill for a simple scenario, one approach is to abstract the list into a component and store selected products separately.

Check out this example:

var productList = Vue.component('product-list', {
  props: {
    value: Object,
    products: Array
  },
  template: `
<div class="product-list"><a class="ist-group-item" :class="{'active': product.id === value?.id}" @click="selectProduct(product)" :key="product.id" v-for="product in products">{{product.name}}</a></div>`,
  methods: {
    selectProduct(product) {
      this.$emit('input', product)
    }
  }
})

var app = new Vue({
  el: "#app",
  data() {
    return {
      selected1: null,
      selected2: null,
      products: Array(5).fill(0).map((pr, id) => ({
        id: id + 1,
        name: `Product ${id + 1}`
      }))
    }
  },
  mounted() {
    //console.log(this.products)
  },
  methods: {}
});

.product-list {
  border: 1px solid black;
  padding: 5px;
  margin-top: 5px;
}

.ist-group-item {
  display: block;
  transition: all .3s ease-in;
}

.ist-group-item:hover {
  background: lightgray;
}

.ist-group-item.active {
  background: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <product-list v-model="selected1" :products="products">
  </product-list>
  <product-list v-model="selected2" :products="products">
  </product-list>

</div>

Answer 4

Although it may seem like overkill for a simple scenario, one approach is to abstract the list into a component and store selected products separately.

Check out this example:

var productList = Vue.component('product-list', {
  props: {
    value: Object,
    products: Array
  },
  template: `
<div class="product-list"><a class="ist-group-item" :class="{'active': product.id === value?.id}" @click="selectProduct(product)" :key="product.id" v-for="product in products">{{product.name}}</a></div>`,
  methods: {
    selectProduct(product) {
      this.$emit('input', product)
    }
  }
})

var app = new Vue({
  el: "#app",
  data() {
    return {
      selected1: null,
      selected2: null,
      products: Array(5).fill(0).map((pr, id) => ({
        id: id + 1,
        name: `Product ${id + 1}`
      }))
    }
  },
  mounted() {
    //console.log(this.products)
  },
  methods: {}
});

.product-list {
  border: 1px solid black;
  padding: 5px;
  margin-top: 5px;
}

.ist-group-item {
  display: block;
  transition: all .3s ease-in;
}

.ist-group-item:hover {
  background: lightgray;
}

.ist-group-item.active {
  background: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <product-list v-model="selected1" :products="products">
  </product-list>
  <product-list v-model="selected2" :products="products">
  </product-list>

</div>

Answer 5

Answer №3

One of the main issues at hand is that activeIndex is a singular variable, making it impossible to use for setting the index in both lists simultaneously.

The root cause lies in not being able to distinctly specify which list should be activated upon clicking within the v-for loop.

new Vue({
  el: "#app",
  data: {
    list1: [{
        name: "Learn JavaScript",
        done: false
      },
      {
        name: "Learn Vue",
        done: false
      },
      {
        name: "Play around in JSFiddle",
        done: true
      },
    ],
    list2: [{
        name: "Learn JavaScript",
        done: false
      },
      {
        name: "Learn Vue",
        done: false
      },
      {
        name: "Play around in JSFiddle",
        done: true
      },
    ],
    active1Index: null,
    active2Index: null
  },
  methods: {
    toggleActive: function(list, index) {
      if (list === "list1") {
        this.active1Index = index
      } else {
        this.active2Index = index
      }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.active {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class='list-group'>
    <a v-for='(product, idx) in list1' class='list-group-item' v-on:click='toggleActive("list1", idx)' :class="{'active': idx == active1Index}">
      {{product.name}}
      </a>
  </div>


  <div class='list-group'>
    <a v-for='(product, idx) in list2' class='list-group-item' v-on:click='toggleActive("list2", idx)' :class="{'active': idx == active2Index}">
       {{product.name}} 
       </a>
  </div>
</div>

Answer 6

One of the main issues at hand is that activeIndex is a singular variable, making it impossible to use for setting the index in both lists simultaneously.

The root cause lies in not being able to distinctly specify which list should be activated upon clicking within the v-for loop.

new Vue({
  el: "#app",
  data: {
    list1: [{
        name: "Learn JavaScript",
        done: false
      },
      {
        name: "Learn Vue",
        done: false
      },
      {
        name: "Play around in JSFiddle",
        done: true
      },
    ],
    list2: [{
        name: "Learn JavaScript",
        done: false
      },
      {
        name: "Learn Vue",
        done: false
      },
      {
        name: "Play around in JSFiddle",
        done: true
      },
    ],
    active1Index: null,
    active2Index: null
  },
  methods: {
    toggleActive: function(list, index) {
      if (list === "list1") {
        this.active1Index = index
      } else {
        this.active2Index = index
      }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.active {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class='list-group'>
    <a v-for='(product, idx) in list1' class='list-group-item' v-on:click='toggleActive("list1", idx)' :class="{'active': idx == active1Index}">
      {{product.name}}
      </a>
  </div>


  <div class='list-group'>
    <a v-for='(product, idx) in list2' class='list-group-item' v-on:click='toggleActive("list2", idx)' :class="{'active': idx == active2Index}">
       {{product.name}} 
       </a>
  </div>
</div>

Answer 7

Answer №4

Big shoutout to all the incredible individuals who took the time to provide answers on stackoverflow. Julia's solution really came through for me! I am now in the process of incorporating it across my entire application and various lists.

A heartfelt thank you, Julia!

Answer 8

Big shoutout to all the incredible individuals who took the time to provide answers on stackoverflow. Julia's solution really came through for me! I am now in the process of incorporating it across my entire application and various lists.

A heartfelt thank you, Julia!

``Incorporating Vue.js: A Guide to Emphasizing the Chosen Selection from Numerous Lists

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

Utilizing JavaScript Callbacks in HTML Image Tags

Tips for modifying the type definition of a third-party library in a Vue project built with Create-Vue

What is the best way to retrieve data from localStorage while using getServerSideProps?

Is there a way to display a foundation.css drop-down menu using jQuery?

Activate a .click() event on a hyperlink exclusively in mobile view

Guide to setting up a Node, Express, Connect-Auth, and Backbone application architecture for server-side development

Having difficulty locating audio files within a Next.js project

Error: content within v-html directive not displaying as expected

Sort through an array of objects using a different array

Turn off Chrome's new tab preview thumbnails

Manage a frame directly from the parent page

Patience is key as we wait for the webpage to finish loading

Retrieve data from an array within the user Collection using Meteor and React Native

Anticipate the completion of Subject callback execution

Relocating sprite graphic to designated location

Implementing pagination in React: A step-by-step guide

The body in Express is set to "Cannot GET [route]" during the execution of asynchronous code

Deciphering the Essence of Promise Sequences

Population of the global namespace in JavaScript without the need for the 'new'