Improving Vue Method with Lodash?

Question

Improving Vue Method with Lodash?

In one of my Vue components, I have implemented logic in the watch prop that allows for sequential switching between elements when the down arrow key (key code 40) is pressed. While it is not too messy right now, there is a concern that it may become highly inefficient in the long run. Here is the current structure:

data () {
 return {
  firstElActive: true,
  secondElActive: false,
  thirdElActive: false
  ...
 }

},

props: {
 nextEl: {
  type: Boolean,
  default: false,
  required: true
 }
},

watch: {
 nextEl: function (value) {
  if (this.nextEl) {
   if (this.firstElActive) {
    this.firstElActive = !this.firstElActive;
    this.secondElActive = !this.secondElActive;
    ... // other specific logic
   }
   else if (this.secondElActive) {
    this.secondElActive = !this.secondElActive;
    this.thirdElActive = !this.thirdElActive;
    ... // other specific logic
   }
   ... // and so on
  }
 }
}

It's evident that this approach may lead to complications as the codebase grows. I have Lodash globally available (window._ = require('lodash')) and wish to leverage it for refactoring. I'm currently exploring the most efficient methods to improve this. Any suggestions?

javascript vue.js refactoring lodash

Answer 1

Answer №1

Opt for using a single active index instead of multiple boolean data properties. Increase or decrease the active index based on user interaction.

new Vue({
  name: 'example',

  data() {
    return {
      items: [
        { id: 0, value: 'item 1'}, 
        { id: 1, value: 'item 2'}, 
        { id: 2, value: 'item 3'},
      ],
      activeIndex: 0,
      arrowUpKeyCode: 38,
      arrowDownKeyCode: 40,
    };
  },

  computed: {
    currentItem() {
      return this.items[this.activeIndex];
    },
  },

  methods: {
    bindEvents() {
      document.addEventListener('keydown', this.onKeyDown);
    },

    unbindEvents() {
      document.removeEventListener('keydown', this.onKeyDown);
    },

    onPrev() {
      console.log(`on prev (key code ${this.arrowUpKeyCode}) ${this.currentItem.value}`);
    },

    onNext() {
      console.log(`on next (key code ${this.arrowDownKeyCode}) ${this.currentItem.value}`);
    },

    goPrev() {
      if (this.activeIndex > 0) {
        this.activeIndex -= 1;
        this.onPrev();
      }
    },

    goNext() {
      if (this.activeIndex < this.items.length - 1) {
        this.activeIndex += 1;
        this.onNext();
      }
    },

    onKeyDown(ev) {
      if (this.arrowUpKeyCode === ev.keyCode) this.goPrev();
      else if (this.arrowDownKeyCode === ev.keyCode) this.goNext();
    },
  },

  mounted() {
    this.bindEvents();
  },

  beforeDestroy() {
    this.unbindEvents();
  },
}).$mount('#example');

.active { background-color: dodgerblue; }

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e2e1f1d4a6baa1baa5a7">[email protected]</a>/dist/vue.js"></script>

<div id="example">
  <ul>
    <li v-for="(item, index) in items" 
        :key="item.id" 
        :class="{ active: index === activeIndex }">
      {{ item.value }}
    </li>
  </ul>
</div>

Answer 2

Opt for using a single active index instead of multiple boolean data properties. Increase or decrease the active index based on user interaction.

new Vue({
  name: 'example',

  data() {
    return {
      items: [
        { id: 0, value: 'item 1'}, 
        { id: 1, value: 'item 2'}, 
        { id: 2, value: 'item 3'},
      ],
      activeIndex: 0,
      arrowUpKeyCode: 38,
      arrowDownKeyCode: 40,
    };
  },

  computed: {
    currentItem() {
      return this.items[this.activeIndex];
    },
  },

  methods: {
    bindEvents() {
      document.addEventListener('keydown', this.onKeyDown);
    },

    unbindEvents() {
      document.removeEventListener('keydown', this.onKeyDown);
    },

    onPrev() {
      console.log(`on prev (key code ${this.arrowUpKeyCode}) ${this.currentItem.value}`);
    },

    onNext() {
      console.log(`on next (key code ${this.arrowDownKeyCode}) ${this.currentItem.value}`);
    },

    goPrev() {
      if (this.activeIndex > 0) {
        this.activeIndex -= 1;
        this.onPrev();
      }
    },

    goNext() {
      if (this.activeIndex < this.items.length - 1) {
        this.activeIndex += 1;
        this.onNext();
      }
    },

    onKeyDown(ev) {
      if (this.arrowUpKeyCode === ev.keyCode) this.goPrev();
      else if (this.arrowDownKeyCode === ev.keyCode) this.goNext();
    },
  },

  mounted() {
    this.bindEvents();
  },

  beforeDestroy() {
    this.unbindEvents();
  },
}).$mount('#example');

.active { background-color: dodgerblue; }

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e2e1f1d4a6baa1baa5a7">[email protected]</a>/dist/vue.js"></script>

<div id="example">
  <ul>
    <li v-for="(item, index) in items" 
        :key="item.id" 
        :class="{ active: index === activeIndex }">
      {{ item.value }}
    </li>
  </ul>
</div>

Improving Vue Method with Lodash?

Answer №1

Similar questions

Issues with IE7 related to Jquery and potentially HTML as well

Next.JS is having trouble importing the URL class from the 'url' module in Node

Restore Bootstrap Dropdown values to their initial settings when clicked

Using dynamic variables in the $.getJSON function

What is the best way to save JSON data within HTML elements?

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

Advancing past the stage of developing basic functions in the document.ready() event handler

VueJS - vue2-editor rejecting certain tags

Vue.js v-for dynamically creates HTML blocks that capture the state of collapse with two-way data binding

Tips for retrieving specific information from Wikipedia using AJAX

When the HTML content matches a specific value, initiate a click event to trigger

Updating row color according to values obtained from the map function in ReactJs

Develop a personalized event that is compatible with all types of selectors

How can infinite watch loops be detected in Vuejs?

What's the most efficient way to iterate through this Array and display its contents in HTML?

Having images that are too large in size and using a high percentage can

Unable to view Bootstrap Icons in Gulp 4

Utilizing additional PHP files to handle the AJAX post request and subsequently execute the PHP script

Pinterest's "Pin it" button causing issues with the 'back' function in Internet Explorer

I am curious as to why jQuery offers the done() method for promises, while the JavaScript promises documented by Mozilla do not. Is there a way to incorporate a done() method in vanilla JavaScript promises if needed?