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

Question

[Андрей Кузнецов]

Подозреваю, что код для 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")
        }
      }
    }
}

Answer 1

[Александр Аксентьев]

<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>

Answer 2

[Вадим]

1. Судя по коду, самая главная проблема у Вас в том, что Вы не поняли чем реактивный фреймворк отличается от ванильного JS. Не нужно делать запросы в DOM за элементами(разве что за редким исключением). Данные должны управлять состоянием элемента.
2. Куда копать - динамическое присвоение классов. Нужно завести состояние в data которое будет управлять наличием класса, а по клику на кнопку менять это состояние на противоположное. Таким образом будет переключаться класс на кнопках.

Comments

[Андрей Кузнецов]

Благодарю, помогло чтение документации.Наверное короче и невозможно написать

data() {
  return {
    isActive: true
  }
},

methods: {    
      setActiveBtn: function () {
       this.isActive = !this.isActive
      }
}

}

<template>
 <div class="btn-topbox">

 <button 
 class="btn btn1"
  @click=" setActiveBtn()"
  :class="{ active: isActive }">Limit</button>

  <button class="btn btn2" 
  @click=" setActiveBtn()"
  :class="{ active: !isActive }">Market</button> 
</div>

</template>

[Вадим]

Андрей Кузнецов, нуу всегда найдётся извращенец, который может написать короче)

Answer 3

[0xD34F]

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>