0

Обращение к 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>
4
  • event.target - это будет this элемента
    – Dmytro
    13 дек 2019 в 11:37
  • спасибо большое
    – Proshka
    13 дек 2019 в 11:40
  • @Дмытрык, дажеко не всегда.
    – Qwertiy
    13 дек 2019 в 15:12
  • @Дмытрык ваш ответ помог решить мою задачу. Благодарю
    – Proshka
    13 дек 2019 в 15:20

1 ответ 1

3

Ответ несколько иной чем вы ожидаете. Вам не нужно обращаться к 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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.