progress bar with vuejs
up vote
0
down vote
favorite
I have a progress bar that amount increments when I click it, but I am trying to make the width increment as well. I have tried binding the style class to "score" but that breaks it. I presume I am mission some logic to increase the width. any help would be great
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>css vue.js
asked Nov 22 at 3:41
Vzupo
309214
add a comment |
up vote
0
down vote
favorite
I have a progress bar that amount increments when I click it, but I am trying to make the width increment as well. I have tried binding the style class to "score" but that breaks it. I presume I am mission some logic to increase the width. any help would be great
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>css vue.js
asked Nov 22 at 3:41
Vzupo
309214
2
you should be able to bind style to score like this:style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 at 3:57
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a progress bar that amount increments when I click it, but I am trying to make the width increment as well. I have tried binding the style class to "score" but that breaks it. I presume I am mission some logic to increase the width. any help would be great
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>css vue.js
asked Nov 22 at 3:41
Vzupo
309214
I have a progress bar that amount increments when I click it, but I am trying to make the width increment as well. I have tried binding the style class to "score" but that breaks it. I presume I am mission some logic to increase the width. any help would be great
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" style="width:70%">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>css vue.js
css vue.js
asked Nov 22 at 3:41
Vzupo
309214
asked Nov 22 at 3:41
Vzupo
309214
asked Nov 22 at 3:41
Vzupo
309214
asked Nov 22 at 3:41
Vzupo
309214
asked Nov 22 at 3:41
Vzupo
309214
309214
2
you should be able to bind style to score like this:style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 at 3:57
add a comment |
2
you should be able to bind style to score like this:style="{ width: score + '%' }". How did you bind it? also your data should be a function
– Andrew1325
Nov 22 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 at 3:57
2
2
you should be able to bind style to score like this
:style="{ width: score + '%' }". How did you bind it? also your data should be a function– Andrew1325
Nov 22 at 3:51
you should be able to bind style to score like this
:style="{ width: score + '%' }". How did you bind it? also your data should be a function– Andrew1325
Nov 22 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 at 3:57
No worries. Cheers.
– Andrew1325
Nov 22 at 3:57
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
andrew1325 allready given you the answer in comment. i just added
the solution in solution panel
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100"
:style="{ width: score + '%' }"> {{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return{
score: 0
}
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
add a comment |
up vote
0
down vote
If you want to directly bind your score to your progress bar maybe you should consider to limit your score to 100 since the max value of the progress bar is, indeed, 100. Your snippet could be like this:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: score+'%'}">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= 100 ? 100: newScore;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
Otherwise, you could use a computed var to build your progress bar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: progressWidth+'%'}">
{{this.score}} / {{this.maxScore}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0,
maxScore: 3000
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= this.maxScore ? this.maxScore: newScore;
},
},
computed: {
progressWidth(){
return (this.score * 100) / this.maxScore;
}
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 6:46
fvaco
1
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
andrew1325 allready given you the answer in comment. i just added
the solution in solution panel
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100"
:style="{ width: score + '%' }"> {{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return{
score: 0
}
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
add a comment |
up vote
0
down vote
andrew1325 allready given you the answer in comment. i just added
the solution in solution panel
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100"
:style="{ width: score + '%' }"> {{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return{
score: 0
}
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
add a comment |
up vote
0
down vote
up vote
0
down vote
andrew1325 allready given you the answer in comment. i just added
the solution in solution panel
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100"
:style="{ width: score + '%' }"> {{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return{
score: 0
}
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
andrew1325 allready given you the answer in comment. i just added
the solution in solution panel
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100"
:style="{ width: score + '%' }"> {{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function(){
return{
score: 0
}
},
methods:{
incrementBy20:function(){
this.score+=20;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
answered Nov 22 at 5:06
Emtiaz Zahid
1,015516
1,015516
add a comment |
add a comment |
up vote
0
down vote
If you want to directly bind your score to your progress bar maybe you should consider to limit your score to 100 since the max value of the progress bar is, indeed, 100. Your snippet could be like this:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: score+'%'}">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= 100 ? 100: newScore;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
Otherwise, you could use a computed var to build your progress bar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: progressWidth+'%'}">
{{this.score}} / {{this.maxScore}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0,
maxScore: 3000
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= this.maxScore ? this.maxScore: newScore;
},
},
computed: {
progressWidth(){
return (this.score * 100) / this.maxScore;
}
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 6:46
fvaco
1
add a comment |
up vote
0
down vote
If you want to directly bind your score to your progress bar maybe you should consider to limit your score to 100 since the max value of the progress bar is, indeed, 100. Your snippet could be like this:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: score+'%'}">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= 100 ? 100: newScore;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
Otherwise, you could use a computed var to build your progress bar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: progressWidth+'%'}">
{{this.score}} / {{this.maxScore}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0,
maxScore: 3000
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= this.maxScore ? this.maxScore: newScore;
},
},
computed: {
progressWidth(){
return (this.score * 100) / this.maxScore;
}
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 6:46
fvaco
1
add a comment |
up vote
0
down vote
up vote
0
down vote
If you want to directly bind your score to your progress bar maybe you should consider to limit your score to 100 since the max value of the progress bar is, indeed, 100. Your snippet could be like this:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: score+'%'}">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= 100 ? 100: newScore;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
Otherwise, you could use a computed var to build your progress bar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: progressWidth+'%'}">
{{this.score}} / {{this.maxScore}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0,
maxScore: 3000
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= this.maxScore ? this.maxScore: newScore;
},
},
computed: {
progressWidth(){
return (this.score * 100) / this.maxScore;
}
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 6:46
fvaco
1
If you want to directly bind your score to your progress bar maybe you should consider to limit your score to 100 since the max value of the progress bar is, indeed, 100. Your snippet could be like this:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: score+'%'}">
{{this.score}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= 100 ? 100: newScore;
},
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
Otherwise, you could use a computed var to build your progress bar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{score}} <button v-on:click="incrementBy20">Click</button>
<div class="progress">
<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="score" aria-valuemin="0" aria-valuemax="100" :style="{width: progressWidth+'%'}">
{{this.score}} / {{this.maxScore}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 0,
maxScore: 3000
},
methods:{
incrementBy20:function(){
let newScore = this.score + 20;
this.score = newScore >= this.maxScore ? this.maxScore: newScore;
},
},
computed: {
progressWidth(){
return (this.score * 100) / this.maxScore;
}
},
mounted:function(){
this.incrementBy20()
}
});
</script>
</body>
</html>
answered Nov 22 at 6:46
fvaco
1
answered Nov 22 at 6:46
fvaco
1
answered Nov 22 at 6:46
fvaco
1
answered Nov 22 at 6:46
fvaco
1
1
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423561%2fprogress-bar-with-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
you should be able to bind style to score like this
:style="{ width: score + '%' }". How did you bind it? also your data should be a function– Andrew1325
Nov 22 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 at 3:57