Vue.js, Как получить доступ к тегу на котором вызывается директива?

#javascript #vuejs

Нужно получить доступ к элементу (тегу) для которого вызывается метод frameShow,
который вызывается директивой v-if. Это позволит получать атрибуты, родителей и потомков
элемента. 


    

    




...

methods: {
    frameShow: function () {
        //id = a1 или a2
        return (id === "a1") ? true : false;
    },
}


Как, например, получить в методе frameShow id тега для которого вызывается этот метод,
через директиву Vue.js
    

Ответы

Ответ 1

Если отвечать на поставленный вопрос


  Как получить доступ к тегу, на котором вызывается директива v-if?


то ответ — никак.

Дело в том, что в момент вызова функции в директиве v-if, а правильнее сказать, 
в момент проверки логического выражения в директиве v-if, элемента еще не существует.
В результате проверки выражения будет решено, создать и добавить элемент или нет.

Ниже приведен пример, который показывает, 
первое, что проверка выражения в директиве v-if происходит раньше, чем построение
элемента, 
и второе, что это каждый раз новый элемент.



new Vue({
  el: '#demo',
  data: function() {
    return { isShown: false }
  },
  methods: {
    show: function () {
      console.log('show')
      return this.isShown
    },
    random: function () {
      console.log('random')
      return Math.random()
    }
  }
})



  
  
{{ random() }}



Ответ 2

Либо передавать в функцию значение:

2222
33333

frameShow: function (item) {
    return (item === 1) ? true : false; 
},

Если собираетесь манипулировать отображаемыми данными в зависимости от класса или
id , почему просто не использовать css ?