vue.js: ": class", потому что classList неверен

Question

как cood, как это

'<div class="item" :class="{'editable':canEdit}"></div>';

1. установите для 'canEdit' значение false ------- классы 'div' равны 'item'
2. '$("div"). addClass ("on") '------ классы' div 'являются "item on"
3. установите' canEdit 'в true -------классы 'div' являются "редактируемыми элементами"

---

вопрос: почему классы 'div' не являются 'item on editable'

Answer 1

Потому что вы не используете Vue для добавления класса к элементу. Таким образом, Vue не знает, что вы добавили новый класс к элементу.

Смотрите этот пример, где я добавляю класс, НЕ используя Vue:

new Vue({
  el: '#app',
  template: `
    <div>
      <div ref="e" class="a" :class="{ b: b }"></div>
      <button @click="toggleB">Toggle B</button>
      <button @click="addC">Add C</button>
    </div>
  `,
  data(){
    return {
      b: true
    }
  },
  methods: {
    toggleB(){
      this.b = !this.b;
    },
    addC(){
      this.$refs.e.classList.add('c');
    }
  }
});

.a {
  width: 100px;
  height: 100px;
}

.b {
  border: 1px solid black;
}

.c {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>

Теперь, если я использую Vue для добавления класса, он будет работать, потому что теперь Vue знает:

new Vue({
  el: '#app',
  template: `
    <div>
      <div class="a" :class="{ b: b, c: c }"></div>
      <button @click="toggleB">Toggle B</button>
      <button @click="addC">Add C</button>
    </div>
  `,
  data(){
    return {
      b: true,
      c: false
    }
  },
  methods: {
    toggleB(){
      this.b = !this.b;
    },
    addC(){
      this.c = true;
    }
  }
});

.a {
  width: 100px;
  height: 100px;
}

.b {
  border: 1px solid black;
}

.c {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>