Прибавить значение к переменной при нажатии на кнопку vue.js

06 апреля 2021, 16:20

Есть 4 кнопки с месяцами. Нужно чтобы при нажатии на 2 мес. к процентами прибавлялось 2,5 , на 4 - 7,5 , на 8 - 10 и тд. Число процентов это переменная, при клике на кнопки я могу сделать так чтобы переменная увеличивалась, но проблема в том, что не получается сделать сбрасывание предыдущего нажатия и значения, когда нажата другая кнопка из этих четырех. Кнопки:

    <div class="buttons">
                <span :class="{active : two_m}" @click="two_m = !two_m ; month()">2 мес.</span>
                <span>4 мес.</span>
                <span>8 мес.</span>
                <span>12 мес.</span>
     </div>
<p>{{percent}}</p>

Метод:

 month() {
            if (this.two_m ) {
                this.percent += 2.5;
            }
        },

Данные в data

two_m:false, //говорит о том, что кнопка не нажата
percent: 0, // сами проценты

Answer 1

var app = new Vue({ 
  el: '#app', 
  data: { 
    months: 2, 
    percent: 2.5 
  }, 
  methods: { 
    setM: function(m, p) { 
      this.months = m; 
      this.percent = p; 
    } 
  } 
});

.active { 
  background: #f00; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
<div class="buttons"> 
    <span :class="{active : months == 2}" @click="setM(2,2.5)">2 мес.</span> 
    <span :class="{active : months == 4}" @click="setM(4,7.5)">4 мес.</span> 
    <span :class="{active : months == 8}" @click="setM(8,10)">8 мес.</span> 
</div> 
<p>{{percent}}% к вашему депозиту</p> 
</div>

Answer 2

const app = new Vue({ 
  el: '#app', 
  data: { 
    default: 5, 
    percent: 7, // 5+2 (percent+default) 
  }, 
  methods: { 
    add(p){ 
      this.percent = this.default; 
      this.percent += p; 
    }, 
  }, 
})

span{ 
  padding: 5px; 
  cursor:pointer; 
  user-select:none; 
} 
span:hover{ 
  background:grey; 
  color:red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <template> 
    <div 
    > 
      <span 
        @click="add(2)" 
      > 
        2 
      </span> 
      <span 
        @click="add(3)" 
      > 
        3 
      </span> 
      <span 
        @click="add(4)" 
      > 
        4 
      </span> 
    </div> 
    <p>Результат: {{percent}}%</p> 
  </template> 
</div>