Clash Royale CLAN TAG

Vue JS: Accessing data from different component

I have a Vue component that has a 'vue-webcam' component inside, my problem is how can I access the "stream" inside of it data and set it to stop using my method out side of that 'vue-webcam' component. Is there anyway of or I have to make a state

<script>
export default{
components:{
'vue-webcam':{
render:function(h){
return h('video',{
...
})
}
},
props:{
...
},
data:{
return{
video: '',
stream: '', // I need to get this using my btn_stop
hasUserMedia: ''
}
}
},
data:()=>({
///...
}),
methods:{
btn_stop(){
let tracks = this.stream.getTracks()[0] // How do I access the "stream" data above on my vue-webcam component
tracks.stop()
}
}
}
</script>


isPlaying: true

vue-webcam

btn_stop()

isPlaying

vue-webcam

isPlaying

2 Answers
2

Component methods are available publicly. You can set a ref property for your component and call methods on it. For example, add a stop method to vue-webcam...

ref

stop

vue-webcam

methods: {
stop () {
this.stream.getTracks()[0].stop()
this.$emit('stopped') // for extra points
}
}


then in your parent component's template

<vue-webcam ref="webcam" @stopped="someOptionalEventHandler" .../>


and in the btn_stop method...

btn_stop

methods: {
btn_stop () {
this.$refs.webcam.stop()
}
}


While you're here, Vue component data must always be a function and preferably not an arrow function (especially if you need to refer to component instance properties). So both your data properties above should be

data

data

data () {
return {
// data properties
}
}


or

data: function() {
return {
// data properties
}
}


I have not worked with VueJs, but if it uses objects itself in background, this trick may help you:

VueJs

export default{
components:{
'vue-webcam':{
render:function(h){
return h('video',{
...
})
}
},
props:{
...
},
data:{
return (function(d){return d;})(window.$data={
video: '',
stream: '', // I need to get this using my btn_stop
hasUserMedia: ''
})
}
},
data:()=>({
///...
}),
methods:{
btn_stop(){
let tracks = window.$data.stream.getTracks()[0] // How do I access the "stream" data above on my vue-webcam component
tracks.stop()
}
}


}

You can add the components to window object with this trick for access to per member of it.

components

window

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.