带有 v-on 的按钮：单击在 btn-primary 和 btn-primary-outline 类之间切换不起作用

Question

我正在开发一个打开模式的按钮。默认情况下，它应该具有 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
}

我觉得按钮不喜欢没有定义这两个类中的任何一个，但我想不出任何其他方式来做到这一点。

Answer 1

你的“错误”你使用了数组语法但是“else”的逻辑是空的''（如果settingsButtonIsActive是假的渲染=>''）+总是渲染btn-primary-outline（The (ternary) operator里面@ 987654328@ 索引 - btn-primary-outline 在1 索引上）。

例如：

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

渲染：

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

不在“vue”中，这是你的逻辑：

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

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>

Answer 2

我建议稍微重写一下代码。

首先，你可以把类名开关写成一个计算属性：

// ... 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。

Answer 3

我通过使用对象语法而不是数组语法来修复它。

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