Using Dom7 to access or send html element in component


#1

Hi, I have a serious problem with html elements and I hope somebody can help me. I use an external API in actions where I have methods that I need to send html element, div.

Here is the full issue, I use a webRTC library API and I need to send local and remote video containers, basically just div elments for video call, to some method which exist in actions file, but I have these div elements in one of the components. Just sending them as parameters did not worked for the methods.

2 possible solutions come to my mind, but none of them worked yet

  1. Either send div from component to action via commit or dispath as parameter

  2. Access div from actions via some Dom7 method

Here is the code I trred so far for the first method but did not work
code

    videoCall () {
        let options = [{key: 'localVideoContainer', value: document.getElementById('localVideoContainer')},
          {
            key: 'remoteVideoContainer', value: document.getElementById('remoteVideoContainer')
          }]
        this.SET_CALL_OPTIONS(options)
        this.$store.dispatch('call');
      }
      this.callingButtons.videoCall = !this.callingButtons.videoCall
    },

css

#localVideoContainer, #remoteVideoContainer{
  height: 200px;
}

Here is a snapshot what I get in store, div as parameter
params


#2

Sending HTML elements to/from store sounds like something wrong for me. Could explain more detailed with more code examples what and where you need to pass html elements?


#3

I have actions.js file under store and I need to send divs inside options object. Normaly it works with standard html where html and API method are in same place, however here all API methods are in actions file

export const answer = ({ commit, state }) => {
  kandy.call.answer(state.incomingCall.callId, state.callOptions)
}