progress bar with vuejs
0
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 '18 at 3:41
VzupoVzupo
309215
add a comment |
0
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 '18 at 3:41
VzupoVzupo
309215
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 '18 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 '18 at 3:57
add a comment |
0
0
0
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 '18 at 3:41
VzupoVzupo
309215
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 '18 at 3:41
VzupoVzupo
309215
asked Nov 22 '18 at 3:41
VzupoVzupo
309215
asked Nov 22 '18 at 3:41
VzupoVzupo
309215
asked Nov 22 '18 at 3:41
VzupoVzupo
309215
asked Nov 22 '18 at 3:41
VzupoVzupo
309215
309215
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 '18 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 '18 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 '18 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 '18 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 '18 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 '18 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 '18 at 3:57
No worries. Cheers.
– Andrew1325
Nov 22 '18 at 3:57
add a comment |
2 Answers
2
active
oldest
votes
0
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 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
add a comment |
0
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 '18 at 6:46
fvacofvaco
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
add a comment |
0
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 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
add a comment |
0
0
0
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 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
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 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
answered Nov 22 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
answered Nov 22 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
answered Nov 22 '18 at 5:06
Emtiaz ZahidEmtiaz Zahid
1,043616
1,043616
add a comment |
add a comment |
0
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 '18 at 6:46
fvacofvaco
1
add a comment |
0
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 '18 at 6:46
fvacofvaco
1
add a comment |
0
0
0
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 '18 at 6:46
fvacofvaco
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 '18 at 6:46
fvacofvaco
1
answered Nov 22 '18 at 6:46
fvacofvaco
1
answered Nov 22 '18 at 6:46
fvacofvaco
1
answered Nov 22 '18 at 6:46
fvacofvaco
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.
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 '18 at 3:51
No worries. Cheers.
– Andrew1325
Nov 22 '18 at 3:57