title: Vue.js getElementById() targets wrong instance of component
body: <p>I am trying to build a little project in <strong>Vue.js</strong>, I have defined a child component which a parent component has six instances of.</p>
  
  <p>The child component has a div element:</p>
  
  <pre><code>&lt;div class="player" id="player1"&gt;
  </code></pre>
  
  <p>and a function which will change its own opacity:</p>
  
  <pre><code>changeOpacity(){document.getElementById('playerName').style.opacity = 0.5;}
  </code></pre>
  
  <p>The problem is when I tell the <strong>second</strong> instance of child component to execute its function, the <strong>first</strong> instance of child will change opacity.</p>
  
  <p>My suspicion is it has something to do with unique div id's, that is by creating multiple instances of the child component the id: <code>playerName</code> is no longer unique.</p>
  
  <p>Does anyone have a suggestion for how a child instance can access its own component elements without interfering with other instances of itself?</p>