@AndreyKuz
Интеграция сайта с 1с

Как сократить код во vue.js?

Подозреваю, что код для vue.js далеко не блестящий. Нужна подсказка какие директивы использовать и куда их
вставлять. Готовый код не нужен, нужно направление мысли.

<template>

  <button class="btn btn1 active-btn" @click ="setActiveBtn">Limit</button>
  <button class="btn btn2" @click ="setActiveBtn">Market</button>

</template>

export default {

    components: {
        name: 'LeftBlock'
    },

    methods: {
      
      setActiveBtn: function () {

        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')

        if (btn1.classList.contains('active-btn')) {
          btn1.classList.remove("active-btn")
          btn2.classList.add("active-btn")
        } else {
          btn1.classList.add("active-btn")
          btn2.classList.remove("active-btn")
        }
      }
    }
}
  • Вопрос задан
  • 114 просмотров
Решения вопроса 3
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
<template>

    <button
            class="btn btn1"
            :class="{'active-btn': currentActive === 'limit'}"
            @click="currentActive='limit'">
        Limit
    </button>
    <button
            class="btn btn2"
            :class="{'active-btn': currentActive === 'market'}"
            @click="currentActive='market'">
        Market
    </button>

</template>

<script>
export default {
    data() {
        return {
            currentActive: 'limit'
        }
    }
}
</script>
Ответ написан
Комментировать
MrDecoy
@MrDecoy
Верставший фронтендер
1. Судя по коду, самая главная проблема у Вас в том, что Вы не поняли чем реактивный фреймворк отличается от ванильного JS. Не нужно делать запросы в DOM за элементами(разве что за редким исключением). Данные должны управлять состоянием элемента.
2. Куда копать - динамическое присвоение классов. Нужно завести состояние в data которое будет управлять наличием класса, а по клику на кнопку менять это состояние на противоположное. Таким образом будет переключаться класс на кнопках.
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  buttons: [
    { className: 'btn1', text: 'Limit' },
    { className: 'btn2', text: 'Market' },
  ],
  active: 0,
}),

<button
  v-for="(n, i) in buttons"
  v-text="n.text"
  :class="[ 'btn', n.className, { 'active-btn': i === active } ]"
  @click="active = i"
></button>

или даже так (это если у кнопок числа в классах btn* действительно идут по порядку)

data: () => ({
  buttons: [ 'Limit', 'Market' ],
  active: 'Limit',
}),

<button
  v-for="(n, i) in buttons"
  :class="`btn btn${i + 1} ${n === active ? 'active-btn' : ''}`"
  @click="active = n"
>{{ n }}</button>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы