VUE js и this - как использовать

221

27 декабря 2021, 07:20

Обращение к this внутри функции, созданной в объекте Vue указывает на сам объект 'Vue'. Как обратиться к this элемента, на котором произошло событие - в данном случае - клик

<div id="app">
  <div class="menu-item">          
       <div class="item active" v-on:click="menuItem">К</div>
       <div class="item">С</div>
       <div class="item">П</div>
       <div class="item">O</div>
  </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            menuItem: function (event) {
                let elements = document.querySelectorAll('.menu-item > .item');
                for (let elem of elements) {
                    if(elem.classList.contains('active')){
                        elem.classList.remove("active");
                        console.log(this);
                    }
                }
            }
        }
    })
</script>

Answer 1

Ответ несколько иной чем вы ожидаете. Вам не нужно обращаться к this. Vue это data-first фраемворк. Вы изменяете данные, Vue отрисовывает их. Мы можем изменять классы c помощью :class Подробнее тут

Обратите внимание: Vue следит за DOM самостоятельно, вы не должны изменять его без крайней необходимости.

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          label: 'К',
          isActive: true
        },
        {
          label: 'С',
          isActive: false
        },
        {
          label: 'П',
          isActive: false
        },
        {
          label: 'О',
          isActive: false
        },
      ]
    }
  },
  methods: {
    menuItem(index) {
      this.$set(this.items[index], 'isActive', !this.items[index].isActive);
    }
  }
})

.active {
  background-color: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="menu-item">
    <div v-for="(item, index) in items" :key="index" :class="{ active: item.isActive }" class="item" v-on:click="menuItem(index)">{{ item.label }}</div>
  </div>
</div>