Vue JS: Accessing data from different component

Question

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>

create a boolean isPlaying: true in your parent component's data, pass it to vue-webcam as a prop. in btn_stop(), set isPlaying to false, and now your vue-webcam can handle the tracks by watching isPlaying — Eric Guan
– Eric Guan, Commented Jul 31, 2018 at 3:39

Phil · Accepted Answer · 2018-07-31 04:17:36Z

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...

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...

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 () {
  return {
    // data properties
  }
}

or

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

Collectives™ on Stack Overflow

Vue JS: Accessing data from different component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related