shayan javadi shayan javadi - 20 days ago 5
Javascript Question

Method not changing variable

I'm creating a app that will be accessing the user's webcam. I want to the change the error variable to the error message if

navigator.getUserMedia
fails. This should outputting the error message, but instead it's outputting stream. I'm very new to Vue so pardon me if I'm missing something very obvious
my code is as follows

<template>
<div class="">
<h1 v-if="error === null">
Stream
</h1>
<h1 v-else>
{{ error }}
</h1>
</div>
</template>

<script>
export default {
data () {
return {
error: null
}
},
methods: {
setUnsupported () {
this.error = 'Your browser does not support video :('
}
},
ready () {
this.setUnsupported()


if (navigator.getUserMedia) {

} else {
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
</style>

Answer

If you are using Vue 2.0, ready has been replaced with mounted. Please check the documentation here.

....
mounted () {
    this.setUnsupported()
}
....