Hi,
I have some problem with a UI-template (with v-progress-linear).
I have an old Samsung Galaxy Tab A with fully kiosk browser.
It does update normally all controls except this UI-template.
I must say, that loading the page in Chrome on the tablet does update this control also.
So it's possible a problem of fully kiosk browser ?,
but why all other controls work as expected?
Maybe i made something wrong in this control?
(I am new to html,css and javascript programming)
thanks
Thomas
<div>
<v-progress-linear class="my-progress-class"
label="Batterie"
min="0"
max="100"
height="40"
bg-color="grey"
bg-opacity="0.5"
:color="getColor(value)"
v-model=calcvalue>
<template v-slot:default="{ value }">
<strong>{{ this.value }} W</strong>
</template>
</v-progress-linear>
</div>
</template>
<script>
/*
<strong>{{ Math.abs(Math.floor(value)) }} W</strong>
*/
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
return {
count: 0
}
},
watch: {
// watch for any changes of "count"
count: function () {
if (this.count % 5 === 0) {
this.send({payload: 'Multiple of 5'})
}
}
},
computed: {
// automatically compute this variable
// whenever VueJS deems appropriate
calcvalue: function () {
// return this.value*100/2500
return msg.payload*100/2500
}
},
/*
methods: {
// expose a method to our <template> and Vue Application
increase: function () {
this.count++
}
},
*/
methods: {
// add a function to determine the color of the progress bar given the row's item
getColor: function (value) {
if (value<0) {
return 'red'
} else{
return 'green'
}
},
getValue: function (value) {
return Math.abs(value*100/2500)
}
},
mounted() {
// code here when the component is first loaded
},
unmounted() {
// code here when the component is removed from the Dashboard
// i.e. when the user navigates away from the page
}
}
</script>
<style>
/* define any styles here - supports raw CSS */
/* color: red;*/
/* background-color: blue-grey-lighten-3;*/
.my-progress-class {
}
</style>
