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 that you have read and understand our privacy policy and code of conduct.

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