Кнопка с v-on: щелчок, который переключает между классами btn-primary и btn-primary-outline, не работающими - PullRequest
Новая
       23

Кнопка с v-on: щелчок, который переключает между классами btn-primary и btn-primary-outline, не работающими

0 голосов
/ 30 марта 2020

Я работаю над кнопкой, которая открывает модальное. По умолчанию он должен иметь класс btn-primary-outline (синий текст, прозрачный фон, синяя рамка), при щелчке он должен иметь класс btn-primary (белый текст, синий фон, синяя рамка). Но она не работает, кнопка остается прозрачной, текст синим, и все, что она делает, это включает и выключает синюю границу кнопки.

HTML: 

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    class="btn margin-top-half center-block col-xs-12"
    :class="[settingsButtonIsActive ? 'btn-primary' : '', 'btn-primary-outline']">
<strong>{{labels.lblButtonConfiguration}}</strong>
</button>

Контроллер: 

data = {
     settingsButtonIsActive: false
}

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

Ответы [ 3 ]

1 голос
/ 30 марта 2020

В вашей "ошибке" вы используете синтаксис массива, но лог c из "else" пусто '' (если settingsButtonIsActive ложно, то визуализация => '') + всегда рендер btn-primary-outline ( (Троичный) оператор внутри 0 index - btn-primary-outline on 1 index).

Например, это: 

:class="[settingsButtonIsActive ? 'btn-primary' : '', 'btn-primary-outline', 'hello', 'world']">

рендер: 

<button class="btn-primary btn-primary-outline hello world">

Не в "vue" это ваша логика c: 

var element = document.getElementById("myDIV");

if(settingsButtonIsActive){
  element.classList.add("btn-primary");
}
else{
  element.classList.add(""); 
}

element.classList.add("btn-primary-outline");

Это правильная разметка (For -or-a -or- b) - ярлык для "if else": 

class="settingsButtonIsActive ? 'btn-primary' : 'btn-primary-outline'">

Нет необходимости в ней для синтаксиса массива: https://vuejs.org/v2/guide/class-and-style.html#Array -Синтаксис

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

var app = new Vue({
  el: '#app',
  data: {
    msg: "settingsButtonIsActive",
    settingsButtonIsActive: true,
    isActive: "btn-primary",
    hasError: "btn-primary-outline"
  }
})
button{
  padding: 5px;
  cursor: pointer;
}
.btn-primary{
  background: red;
  border: 1px solid red;
}

.btn-primary-outline{
  background: transparent;
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
          :class="settingsButtonIsActive ? 'btn-primary' : 'btn-primary-outline'">
    <strong>{{msg}}</strong>: {{settingsButtonIsActive}}
  </button>
</div>
1 голос
/ 30 марта 2020

Я бы порекомендовал немного переписать код.

Прежде всего, вы можете написать переключатель имени класса как вычисляемое свойство: 

// ... beginning of your .js code
computed: {
    isButtonActive () {
      return this.settingsButtonIsActive ? 'btn-primary' : 'btn-outline-primary'
    }
}
// ... rest of your .js code

, затем вы можете объединить оба атрибута класса в один и связать его так: 

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    :class="['btn', 'margin-top-half', 'center-block', 'col-xs-12', isButtonActiveClass">
  <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

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

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive" 
    :class="['btn', 'margin-top-half', 'center-block', 'col-xs-12', {'btn-primary': isButtonActiveClass}, {'btn-outline-primary': !isButtonActiveClass}">
  <strong>{{labels.lblButtonConfiguration}}</strong>
</button>

Обратите внимание, что когда я хочу динамически изменять классы, я передаю объект в массив.

Больше информации можно найти на https://vuejs.org/v2/guide/class-and-style.html.

0 голосов
/ 30 марта 2020

Я исправил это, используя синтаксис объекта вместо синтаксиса массива. 

<button v-on:click="settingsButtonIsActive = !settingsButtonIsActive"
        class="btn margin-top-half center-block col-xs-12"
        :class="{'btn-primary' : settingsButtonIsActive === true, 'btn-primary-outline' : settingsButtonIsActive === false}">
    <strong>{{labels.lblButtonConfiguration}}</strong>
</button>
...