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:

https://i.sstatic.net/j6wHM.png

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

Get the JSON array by decoding the JSON data in PHP

Accessing a webpage solely by logging in prevents unauthorized access

Preventing AJAX/hash functionality for specific links exclusively within jQuery Mobile

CSS3 transition applied to a jQuery direction-aware hover effect

The functionality of .map() in Javascript is non-existent

Having difficulty converting an object into an iterable using an arrow function

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

JavaScrip $("").text(); is a straightforward way to recognize and extract

The data type 'string | number | boolean' cannot be assigned to type 'undefined'. Specifically, the type 'string' is incompatible with type 'undefined'. Error code: ts(2322)

"Bringing the power of JavaScript to your WordPress

Access and retrieve pkpass files from a server using React

Is it possible to extract around 10 variables from a JavaScript code, then display them on a webpage after execution?

Error: Unable to set attribute because the property is undefined in the onLoad function

Guide on fixing electron bug in vuejs vuetify project

Disabling ESLint errors is not possible within a React environment

A reliable approach for dynamically altering SVG graphics

Sequelize.js keeps the previous value for linked tables

What distinguishes submitting a form from within the form versus outside of it?

Displaying images dynamically in Angular using ng-repeat with URL strings

What is the best way to iterate through a JSON object using the stages array provided?