Navigate to the Vuejs component's element that has a specified class name

Question

Navigate to the Vuejs component's element that has a specified class name

When a component is loaded, I want it to automatically scroll down to display the element with a class name of 'actual-month' within an unordered list.

<b-card no-body header="<i class='fa fa-align-justify'></i> Unorderd List"  style="height: 680px">
          <b-tabs card pills>
              <b-tab v-for="debt in user_debts"  :title="Debts list"  :key="debt.id" class="card-height">             
                 <table class="table table-sm amortization-header header-fixed">
                  <thead>
                      <tr>
                        <th>Month</th>
                        <th>Balance</th>
                        <th>Paid</th>
                        <th>Debt</th>
                        <th>Nominal Interest</th>
                      </tr>
                  </thead>
                  <tbody> 
                    <tr v-for="month in amortization.schedule" :class="{'actual-month' : month.month == amortization.actual_month}">
                      <td>{{month.month}}</td>
                      <td>{{month.balance.toLocaleString()}}<span class="total">€</span></td>
                      <td>{{month.monthly_payment}}<span class="total">€</span></td>
                      <td>{{month.principle}}<span class="total">€</span></td>
                      <td>{{month.interest}}<span class="total">€</span></td>
                    </tr>
                  </tbody>
                </table>
              </b-tab>
          </b-tabs>
        </b-card>

javascript vue.js vuejs2

Answer 1

Answer №1

To automatically scroll to a specific element on the page, you can utilize the scrollIntoView method:

mounted: function (){
  var targetElement = this.$el.getElementsByClassName("actual-month")[0];
  targetElement.scrollIntoView();
}

Answer 2

To automatically scroll to a specific element on the page, you can utilize the scrollIntoView method:

mounted: function (){
  var targetElement = this.$el.getElementsByClassName("actual-month")[0];
  targetElement.scrollIntoView();
}

Answer 3

Answer №2

There are multiple approaches to achieve this task, but one effective method is to encapsulate it within a reusable mixin:

const scroller = {
  methods: {
    scrollToClass(className) {
      let el = this.$el.querySelector(className)
      let rect = el.getBoundingClientRect()
      window.scrollTo(rect.left, rect.top)
    }
  }
}

You can then utilize this mixin in the mounted hook, where this.$el is accessible:

new Vue({
  el: '#app',
  mixins: [scroller],
  mounted() {
    this.scrollToClass('.actual-date')
  }
})

For demonstration, check out this JSFiddle: https://jsfiddle.net/ha9hm9xe/

Answer 4

There are multiple approaches to achieve this task, but one effective method is to encapsulate it within a reusable mixin:

const scroller = {
  methods: {
    scrollToClass(className) {
      let el = this.$el.querySelector(className)
      let rect = el.getBoundingClientRect()
      window.scrollTo(rect.left, rect.top)
    }
  }
}

You can then utilize this mixin in the mounted hook, where this.$el is accessible:

new Vue({
  el: '#app',
  mixins: [scroller],
  mounted() {
    this.scrollToClass('.actual-date')
  }
})

For demonstration, check out this JSFiddle: https://jsfiddle.net/ha9hm9xe/

Answer 5

Answer №3

Expanding on Julien's response, in many scenarios, incorporating animated actions like instantly moving to a specific section of a webpage or employing smooth scrolling can greatly enhance the user experience:

element.scrollIntoView({ behavior: 'smooth' })

Answer 6

Expanding on Julien's response, in many scenarios, incorporating animated actions like instantly moving to a specific section of a webpage or employing smooth scrolling can greatly enhance the user experience:

element.scrollIntoView({ behavior: 'smooth' })

Answer 7

Answer №4

The solutions provided by others didn't quite resolve my issue - I kept encountering the error message:

cannot access property scrollIntoView of undefined

. To work around this problem, I found that adding a setTimeout did the trick.

Imagine you need to scroll to the first element with the class invalid after submitting a form:

const someComponent {
  ...
  methods: {
    validateForm() {
      if (formValid) {
        // submit form
        ...
      } else {
        // display errors
        ...
        // then scroll to the first one
        this.scrollToInvalidField();
      }
    },
    scrollToInvalidField() {
      // Adding this setTimeout prevents the "undefined" error from occurring.
      setTimeout(() => {
        let el = this.$el.getElementsByClassName('invalid')[0];
        el.scrollIntoView();
      }, 0);
    },
  },
  ...
}

Additionally, for a smoother scrolling experience, you can include { behavior: 'smooth' } as an argument in the scrollIntoView() function, as mentioned by @digout in their response.

Answer 8

The solutions provided by others didn't quite resolve my issue - I kept encountering the error message:

cannot access property scrollIntoView of undefined

. To work around this problem, I found that adding a setTimeout did the trick.

Imagine you need to scroll to the first element with the class invalid after submitting a form:

const someComponent {
  ...
  methods: {
    validateForm() {
      if (formValid) {
        // submit form
        ...
      } else {
        // display errors
        ...
        // then scroll to the first one
        this.scrollToInvalidField();
      }
    },
    scrollToInvalidField() {
      // Adding this setTimeout prevents the "undefined" error from occurring.
      setTimeout(() => {
        let el = this.$el.getElementsByClassName('invalid')[0];
        el.scrollIntoView();
      }, 0);
    },
  },
  ...
}

Additionally, for a smoother scrolling experience, you can include { behavior: 'smooth' } as an argument in the scrollIntoView() function, as mentioned by @digout in their response.

Navigate to the Vuejs component's element that has a specified class name

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to transform a dynamically created JavaScript table into JSON or XML format and then store it as a file?

Create a file object using content with the help of JavaScript

What is the solution for fixing the '$ not defined error' in a .js file with $ajax code?

Verify the fonts that are functioning correctly

Retrieve information from the selected row within a table by pressing the Enter key

React - while the get request successfully retrieves the desired object, the corresponding value is appearing as undefined when integrated into the React component

Unable to retrieve table header information when clicking on a table cell

Tips for transmitting HTML as a JSON object through the res.render function in expressjs

Error: The addDoc() function in FireBase was encountered with invalid data, as it included an unsupported field value of undefined during the execution

Complex recurrent operation

Transmit information from a Vue.js application to a Laravel application

Unable to properly delete data in Express/Postgres

Extract information from JSON using a filter

Animating elements in Nativescript Vue using v-show and transitions

What is the best way to transfer a variable from an @Input property to a service within an Angular2 component?

Themeing for dark mode using styled components in Next JS

AJAX File Upload: Sequentially Queuing Multiple Files

Tips for transferring data from a file located outside an Angular library to files within the Angular library

Injecting a full browser-screen DIV into the body of the webpage

Leveraging JQuery to extract the numerical value located between the slashes within a hyperlink