Navigating through div elements using arrow keys in Vue

Question

Navigating through div elements using arrow keys in Vue

Trying to navigate through div elements using arrow keys is proving to be a challenge for me. I have successfully achieved it in JavaScript, but I am facing difficulties doing it the "vue way". Although there should be no differences, it simply does not work.

I have created a sandbox for anyone to analyze what is happening. It works fine when I am not using Vue.

When attempting to implement this in Vue, I encounter the following error due to this line:

Cannot read property 'focus' of null

document.activeElement.parentNode.previousSibling.firstChild.focus();

Could someone please point out what I am missing? Is the v-for causing the issue, or are there other underlying problems?

javascript vue.js vuejs2

Answer 1

Answer №1

It truly depends on the purpose behind needing a focus. If it's simply for highlighting a particular element, consider using a secondary variable to keep track of the current highlight and apply a class to it instead.

https://codesandbox.io/s/300vxzkyk5

<template>
  <div>
    <input ref="input" type="text" @keydown="test" tabindex="0">
    <div ref="test" v-for="item, index in items" :class="{ focus: index === focus }">
       <div>{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "First" },
        { title: "Second" },
        { title: "Third" }
      ],
      focus: null
    };
  },
  methods: {
    test: function(event) {
      switch (event.keyCode) {
        case 38:
          if (this.focus === null) {
            this.focus = 0;
          } else if (this.focus > 0) {
            this.focus--;
          }
          break;
        case 40:
          if (this.focus === null) {
            this.focus = 0;
          } else if (this.focus < this.items.length - 1) {
            this.focus++;
          }
          break;
      }
    }
  }
};
</script>

<style>
div.focus {
  border: 1px solid blue;
}
</style>

Answer 2

It truly depends on the purpose behind needing a focus. If it's simply for highlighting a particular element, consider using a secondary variable to keep track of the current highlight and apply a class to it instead.

https://codesandbox.io/s/300vxzkyk5

<template>
  <div>
    <input ref="input" type="text" @keydown="test" tabindex="0">
    <div ref="test" v-for="item, index in items" :class="{ focus: index === focus }">
       <div>{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "First" },
        { title: "Second" },
        { title: "Third" }
      ],
      focus: null
    };
  },
  methods: {
    test: function(event) {
      switch (event.keyCode) {
        case 38:
          if (this.focus === null) {
            this.focus = 0;
          } else if (this.focus > 0) {
            this.focus--;
          }
          break;
        case 40:
          if (this.focus === null) {
            this.focus = 0;
          } else if (this.focus < this.items.length - 1) {
            this.focus++;
          }
          break;
      }
    }
  }
};
</script>

<style>
div.focus {
  border: 1px solid blue;
}
</style>

Answer 3

Answer №2

Have you considered utilizing a data-driven strategy for this situation?

Imagine you have a collection of items. Each item can have an active attribute that can be toggled to either true or false.

By using the up and down keys, you can navigate through the array and automatically set the current item to true. This method eliminates the need for any DOM manipulation.

Answer 4

Have you considered utilizing a data-driven strategy for this situation?

Imagine you have a collection of items. Each item can have an active attribute that can be toggled to either true or false.

By using the up and down keys, you can navigate through the array and automatically set the current item to true. This method eliminates the need for any DOM manipulation.

Navigating through div elements using arrow keys in Vue

Answer №1

Answer №2

Similar questions

Error in NVD3 causing charts to be inaccurately rendered

There seems to be an issue with the functionality of Array.filter when trying to use it with arrays

Ways to resolve the error "Uncaught TypeError: data.map is not a function"

Create a personalized Command Line Interface for the installation of npm dependencies

I'm having trouble with my basic routing set up and I'm struggling to understand why it's not working

By harnessing a JSON response

The failure of Vuetify's fast fail feature is not stopping the submission of the form

Obtaining Spotify API access token using JavaScript code on the front end

The Backbone Model is producing unspecified data

Checking for the presence of a certain key within an object containing arrays that are value-based rather than index-based, using a Javascript

use ajax to dynamically load a section of the webpage based on filter criteria

There is an array present with data filled in, but unfortunately, I am unable to retrieve specific elements

Alter the color of the initially chosen option in the dropdown selection

end the node.js automated testing process

Learn how to retrieve specific user information from a JSON file by implementing a button click feature within a custom directory using Angular.js

Retrieve the script's location from the server prior to the initialization of Angular

Using Javascript to Implement Pinch Zoom on Android

Set a string data type as the output stream in C++

Organize information by time intervals using JavaScript

Top approach for triggering and re-triggering AJAX using php