Как преобразовать строку кода JQuery в vue

новичок в Vue, пытается реализовать предыдущий код JS + JQuery в Vue

У меня есть этот список:

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

Каждый раз, когда нажимается следующая / предыдущая кнопка, «активный» класс перемещается к другому элементу списка, например:

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

Как я могу это преобразовать:

$("#progressbar li").eq($("fieldset").index(nextStage)).addClass("active");

В vue synax?

Фотография индикатора выполнения:

Как преобразовать строку кода JQuery в vue

javascript vue.js

30.03.2021 20:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не нужно ничего конвертировать. Вам просто нужно прочитать несколько первых глав документации Vue.

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>

На самом деле, это почти работает для меня, индикатор выполнения показывает, что я нахожусь на странице 1, когда я на странице 3

— 30.03.2021 21:03

Просто измените переменную active, и вы получите то, что вам нужно.

— 30.03.2021 21:05

30.03.2021 20:50