Menu
×
×
Correct!
Exercise:Write the missing code so that the watcher activates a warning class when the value is lower than 40.
<div id="app">
<input type="range" v-model="rangeVal">
<p :class="{ warnClass: warnActive }"><code>{{ rangeVal }}</code></p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
rangeVal: 70,
warnActive: false
}
},
watch: {
rangeVal(val) {
if(val<40){
this.warnActive = true;
}
else{
this.warnActive = false;
}
}
}
})
app.mount('#app')
</script>
Not CorrectClick here to try again. Correct!Next ❯<div id="app"> <input type="range" v-model="rangeVal"> <p :class="{ warnClass: warnActive }"><code>{{ rangeVal }}</code></p> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { rangeVal: 70, warnActive: false } }, watch: {{ if(val<40){ this.warnActive = true; } else{ this.warnActive = false; } } } }) app.mount('#app') </script> |