Vue. js getElementById () предназначается для неправильного экземпляра компонента - PullRequest
Новая
       40

Vue. js getElementById () предназначается для неправильного экземпляра компонента

2 голосов
/ 14 марта 2020

Я пытаюсь построить небольшой проект в Vue. js, я определил дочерний компонент, родительский компонент которого имеет шесть экземпляров.

Дочерний компонент имеет элемент div: 

<div class="player" id="player1">

и функцию, которая изменит свою непрозрачность: 

changeOpacity(){document.getElementById('playerName').style.opacity = 0.5;}

Проблема в том, что я говорю второй экземпляр дочернего элемента Компонент для выполнения своей функции, первый экземпляр дочернего элемента изменит непрозрачность.

Я подозреваю, что он имеет отношение к уникальным идентификаторам div, то есть создает несколько экземпляров дочернего компонента. id: playerName больше не является уникальным.

Есть ли у кого-нибудь предложения о том, как дочерний экземпляр может получить доступ к своим собственным компонентам, не мешая другим его экземплярам?

1 Ответ

3 голосов
/ 14 марта 2020

Как вы заметили, это потому, что идентификаторы являются глобальными, и getElementById вернет первый элемент в DOM с этим идентификатором. Он ничего не знает о * Vue границах компонента.

Правильный способ доступа к элементу внутри компонента - использовать $refs, а не getElementById. 

<div ref="playerName">...</div>

changeOpacity () {
  this.$refs.playerName.style.opacity = 0.5
}

Однако прямое манипулирование DOM не очень Vue способ сделать это. Вместо этого следует связать непрозрачность со свойством данных и изменить его. 

<div :style="{ opacity }">...</div>

data () {
  return {
    opacity: 1
  }
}

changeOpacity () {
  this.opacity = 0.5
}

В полном объеме: 

new Vue({
  el: '#app',

  data () {
    return {
      opacity: 1
    }
  },
  
  methods: {
    changeOpacity () {
      this.opacity = 0.5
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div :style="{ opacity }">
    Content
  </div>
  <button @click="changeOpacity">Change</button>
</div>

Если это просто заданное значение c для непрозрачности, например, 0,5, тогда вам действительно следует использовать класс CSS. Это будет выглядеть примерно так: 

new Vue({
  el: '#app',

  data () {
    return {
      halfHide: false
    }
  },
  
  methods: {
    changeOpacity () {
      this.halfHide = true
    }
  }
})
.half-hide {
  opacity: 0.5;
}
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div :class="{ 'half-hide': halfHide }">
    Content
  </div>
  <button @click="changeOpacity">Change</button>
</div>
...