Step-by-step guide on transforming jQuery code into Vue JS:

Question

Step-by-step guide on transforming jQuery code into Vue JS:

Recently delving into Vue, attempting to translate previous JS + JQuery code into Vue

Here is the list I'm working with:

    <ul id="progressbar">
    <li class="active">integration Ip's</li>
    <li>Traffic Details</li>
    <li>API Creds</li>
  </ul>

Whenever the next/previous button is clicked, the "active" class shifts to another list element. For example:

isNextClicked() {
            var nextStage = this.currentPage;
            this.currentPage++;
            console.log("CurrentPage =>", this.currentPage);
            $("#progressbar li").eq($("fieldset").index(nextStage)).addClass("active"); //Converting this to vue
            return this.currentPage;
        },

How can I convert this line of code to Vue syntax?

Photo of the progress bar:

javascript vue.js

Answer 1

Answer №1

If you want to learn Vue.js, all you have to do is go through the initial chapters in the Vue documentation.

var app = new Vue({
  el: '#app',
  data() {
    return {
      active: 1,
      step: ['step 1', 'step 2', 'step 3'],
    }
  },
})

.activeClass{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(items, index) in step"
      :key="items"
      :class="(index === active) ? 'activeClass' : ''"
      v-text="items"
    />
  </ul>
</div>

Answer 2

If you want to learn Vue.js, all you have to do is go through the initial chapters in the Vue documentation.

var app = new Vue({
  el: '#app',
  data() {
    return {
      active: 1,
      step: ['step 1', 'step 2', 'step 3'],
    }
  },
})

.activeClass{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(items, index) in step"
      :key="items"
      :class="(index === active) ? 'activeClass' : ''"
      v-text="items"
    />
  </ul>
</div>

Step-by-step guide on transforming jQuery code into Vue JS:

Answer №1

Similar questions

Inconsistent Accuracy of React Countdown Timer

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Struggling to access a PHP variable in a JavaScript file through AJAX

Tips for updating information when a button is chosen

Conducting various calculations and showcasing them all on a single webpage

difficulty encountered during json parsing

What is the best way to retrieve a Rails variable that is restricted to a specific partial?

Is there a way to efficiently import only a specific data array into a NextJs page without importing the entire component dynamically?

A Comprehensive Guide on Implementing String Values in Highchart Series

What is the method for executing PHP code without the need for users to access the webpage?

abandoning the upload of an item into a THREE.js environment

dynamically loading jQuery scripts and content via ajax

Prevent redirection when submitting and show an error message instead

Obtaining values from event listeners in Vue.js across different methods

Is the concept of client-side authentication, similar to that on single-page applications, simply a facade to deter users who trust in it from tampering with the data on the server side?

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

Library for Nodejs that specializes in generating and converting PDF/A files

When exporting data from Datatable to Excel, decimal values including the % symbol may experience rounding issues

Swapping a value within an array and moving it to a new position

How to adjust the "skipNatural" boolean in AngularJS Smart-Table without altering the smart-table.js script