title: Alternative for setting the srcObject using VueJS
body: <p>Setting the "src" attribute of the html video element does not work with Vue.js and Vuex:</p>
  
  <pre><code>&lt;video id="myVideoEl" :src="myStreamSrc" autoplay="autoplay"&gt;
  </code></pre>
  
  <p><code>myStreamSrc</code> is a computed value and is set in a mutation by an event handler:</p>
  
  <pre><code>AddStream: function (state, plMyStream) {
    state.myRTCPeerConnection.addStream(plMyStream)
    state.myStreamSrc = plMyStream
  }
  </code></pre>
  
  <p>When I run my application with that code, I get the following error:</p>
  
  <blockquote>
    <p>HTTP “Content-Type” of “text/html” is not supported. Load of media
    resource <a href="http://localhost:8080/[object%20MediaStream]" rel="noreferrer">http://localhost:8080/[object%20MediaStream]</a> failed.</p>
  </blockquote>
  
  <p>When I do the following:</p>
  
  <pre><code>state.myVideoEl = document.querySelector('#myVideoEl')
  state.myVideoEl.srcObject = payloadWithMyStream
  </code></pre>
  
  <p>I do not get any error and the stream is shown. The problem is, I can not use the working code snipped because the referenced elements are added later to the DOM. This code snippet does not work when I bind the html video element in a div with a <code>v-if</code> Vuex.js attribute. Then I just get "undefined" as a result (because the div element with the video element did not exist on page load).</p>
  
  <p>Is there a difference between setting the <code>srcObject</code> and setting the <code>src</code> attribute? I thought that when I set <code>srcObject</code> the video element will have a <code>src</code> attribute, but it does not.</p>
  
  <p>Is it possible to set the <code>srcObject</code> in the video html attribute?</p>
  
  <p>For more info, please visit my theard in the Vue.js forum:
  <a href="https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13" rel="noreferrer">https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13</a></p>