javascript - Vue.js - 根据数据属性的更改更改元素的类

Question

我有一个 Vue 实例，它有两个数据属性:error(最初设置为 false)和 classArray(它是一个对象)包含两个类:btn 和 btn-success。

<小时/>

btn 设置为 true 并且 btn-success 设置为 error，最初为 false。

我有两个 input 元素，它们都是按钮，其中第一个元素的类设置为 classArray。

另一个按钮在单击时会调用附加到我的 Vue 实例的方法，该方法应该切换 error (因此，如果 error 为 true，则变为 false，反之亦然)。

我的期望是，由于 classArray 中的 btn-success 设置为 error 的值，因此在切换 的值时code>error 相应的类应该在我的第一个元素上处于事件状态。

尽管 error 的切换按预期工作，但在检查第一个元素时，似乎并未添加 btn-success 类。

这里有什么我遗漏的吗，或者你不能向这样的元素添加类吗？

另外，这是我用来测试这个的代码:

var app = new Vue({
  el: '#app',
  data: {
    error: false,
    classArray: {
      btn: true,
      'btn-success': this.error
    }
  },
  methods: {
    toggle: function() {
      this.error = !this.error;
      console.log(document.getElementById('input1'));
    }
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <input type='button' id='input1' :class='classArray' value='Submit' />
  <input type='button' @click='toggle' value='Change class' />
</div>

Answer 1

问题在于，btn-success 的值仅在首次创建数据对象时设置为 true 一次，此后不会更改，因此更改 this.error 不会对 classArray 产生任何影响。相反，您可以将 classArray 设置为计算属性，并且每当 this.error 更新时它都会更新自身。

var app = new Vue({
  el: '#app',
  computed : {
    classArray(){
      return {
        btn : true,
        'btn-succes' : this.error
      }
    }
  },
  data: {
    error: false,
  },
  methods: {
    toggle: function() {
      this.error = !this.error;
      console.log(document.getElementById('input1'));
    }
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <input type='button' id='input1' :class='classArray' value='Submit' />
  <input type='button' @click='toggle' value='Change class' />
</div>

这只是个人喜好，但我个人喜欢以这种风格使用内联类(间距用于强调)。

<input 
    type='button' 
    id='input1' 
    :class='["btn", error && "btn-success" ]'
    value='Submit'/>

这样做意味着当您有更多需要变量类的元素时，您可以避免添加大量计算属性。