4

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

<div id="app">
    <div id="a1" v-if="frameShow()">
    <div id="a2" v-if="frameShow()">
</div>

...

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

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

8
  • 1
    а зачем знать id? почему не передать в функцию параметр?
    – Grundy
    16 авг 2017 в 6:29
  • id === "a1", в разный момент времени может быть разной. т.е. при первом вызове она будет null следовательно id === null = false, надеюсь ответил на ваш вопрос 16 авг 2017 в 9:06
  • нет не ответил. У тебя постоянный id в элементе, он не меняется никак, по крайней мере в предоставленном коде.
    – Grundy
    16 авг 2017 в 9:49
  • Нужно получить доступ к элементу (тегу) для которого вызывается метод frameShow, который вызывается директивой v-if. Это позволит получать атрибуты, родителей и потомков. id это пример. 16 авг 2017 в 11:01
  • У тебя ошибка в логике. Тебе не нужно получать атрибуты родителей и потомком, потому что у тебя уже есть vue компонент, в котором все нужные тебе данные должны быть и ты уже сам должен их расставлять так как нужно.
    – Grundy
    16 авг 2017 в 11:03

2 ответа 2

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()
    }
  }
})
<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo">
  <button @click="isShown=!isShown">Show/Hide</button>
  <div v-if="show()" class="test">{{ random() }}</div>
</div>

1
  • не совсем верно. Элемент существует, хотя бы потому, что именно у него стоит атрибутом v-if. Но доступа к нему действительно нет, так как в vue идет ориентация на компоненты.
    – Grundy
    17 авг 2017 в 7:14
0
  1. Либо передавать в функцию значение:

    <div id="a1" v-if="frameShow(1)">2222</div>
    <div id="a2" v-if="frameShow(2)">33333</div>
    
    frameShow: function (item) {
        return (item === 1) ? true : false; 
    },
    
  2. Если собираетесь манипулировать отображаемыми данными в зависимости от класса или id , почему просто не использовать css ?

Ваш ответ

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

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