Styjun

Was the dragon prowess intentionally downplayed in S08E04?

Is there any good reason to write "it is easy to see"?

What do the "optional" resistor and capacitor do in this circuit?

What metal is most suitable for a ladder submerged in an underground water tank?

Wireless headphones interfere with Wi-Fi signal on laptop

Could a space colony 1g from the sun work?

Why did the UK remove the 'European Union' from its passport?

What is this weird d12 for?

Why is Drogon so much better in battle than Rhaegal and Viserion?

Network latencies between opposite ends of the Earth

​Cuban​ ​Primes

How to redirect stdout to a file, and stdout+stderr to another one?

What color to choose as "danger" if the main color of my app is red

Formal Definition of Dot Product

Why doesn't Iron Man's action affect this person in Endgame?

Given 0s on Assignments with suspected and dismissed cheating?

Can anyone give me examples of the relative-determinative 'which'?

Can my American children re-enter the USA by International flight with a passport card? Being that their passport book has expired

Why did Varys remove his rings?

Promotion comes with unexpected 24/7/365 on-call

Will the volt, ampere, ohm or other electrical units change on May 20th, 2019?

Is my test coverage up to snuff?

Testing blind license applicants

labelled end points on logic diagram

Vue checkbox value not updating with Bootstrap 4 data-toggle=“buttons”

Twitter Bootstrap Form File Element Upload ButtonBootstrap - button toggle not working rightbootstrap JS and data-toggle=“buttons-checkbox” showing divsKnockout + Bootstrap 3 Radio ButtonsStyle bootstrap checkboxes as buttons without btn-groupbootstrap Label type=checkbox not setting on scopeVue-strap Radio Buttons not working with vue.jsBootstrap 4 toggle buttonBootstrap Vue - change dropdown backgroundInitializing checkboxes in vue-bootstrap b-table rows

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

There is a conflict between Vue and Bootstrap when data-toggle="buttons" is mentioned in the code.

With that the highlighting of buttons work but the v-model array that the checkbox value is bound to is not updated.

If I remove that code, the highlighting of the selected button does not work. However, v-model starts working.

How to solve this issue?

HTML:

 <div class="form-group">
 <label class="searchLabel">Tool:</label>
 <div class="btn-group-toggle" data-toggle="buttons">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" >
 <input type="checkbox" :value="tool.tool_id" v-model="availability">
 tool.tool_name
 </label>
 </div>
 </div>

Vue.JS:

new Vue(
el: '#dev',
data: 
 output: tool: [],
 availability: []
)

twitter-bootstrap vue.js

share|improve this question

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

asked Mar 23 at 15:22

J. DoeJ. Doe

73

add a comment | 

0

There is a conflict between Vue and Bootstrap when data-toggle="buttons" is mentioned in the code.

With that the highlighting of buttons work but the v-model array that the checkbox value is bound to is not updated.

If I remove that code, the highlighting of the selected button does not work. However, v-model starts working.

How to solve this issue?

HTML:

 <div class="form-group">
 <label class="searchLabel">Tool:</label>
 <div class="btn-group-toggle" data-toggle="buttons">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" >
 <input type="checkbox" :value="tool.tool_id" v-model="availability">
 tool.tool_name
 </label>
 </div>
 </div>

Vue.JS:

new Vue(
el: '#dev',
data: 
 output: tool: [],
 availability: []
)

twitter-bootstrap vue.js

share|improve this question

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

asked Mar 23 at 15:22

J. DoeJ. Doe

73

add a comment | 

There is a conflict between Vue and Bootstrap when data-toggle="buttons" is mentioned in the code.

With that the highlighting of buttons work but the v-model array that the checkbox value is bound to is not updated.

If I remove that code, the highlighting of the selected button does not work. However, v-model starts working.

How to solve this issue?

HTML:

 <div class="form-group">
 <label class="searchLabel">Tool:</label>
 <div class="btn-group-toggle" data-toggle="buttons">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" >
 <input type="checkbox" :value="tool.tool_id" v-model="availability">
 tool.tool_name
 </label>
 </div>
 </div>

Vue.JS:

new Vue(
el: '#dev',
data: 
 output: tool: [],
 availability: []
)

twitter-bootstrap vue.js

share|improve this question

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

asked Mar 23 at 15:22

J. DoeJ. Doe

73

 <div class="form-group">
 <label class="searchLabel">Tool:</label>
 <div class="btn-group-toggle" data-toggle="buttons">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" >
 <input type="checkbox" :value="tool.tool_id" v-model="availability">
 tool.tool_name
 </label>
 </div>
 </div>

new Vue(
el: '#dev',
data: 
 output: tool: [],
 availability: []
)

share|improve this question

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

asked Mar 23 at 15:22

J. DoeJ. Doe

73

share|improve this question

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

asked Mar 23 at 15:22

J. DoeJ. Doe

73

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

edited Mar 23 at 16:14

Gilles Heinesch

1,3921823

asked Mar 23 at 15:22

J. DoeJ. Doe

73

asked Mar 23 at 15:22

J. DoeJ. Doe

73

1 Answer
1

active

oldest

votes

0

Codepen : https://codepen.io/anon/pen/MxLyZG

Dont know whats the issue of data-toggle="buttons" with vuejs. When you click the checkbox that actually toggle 'active' class to the checkbox. you can toggle active class using vue. update the code with

<div class="btn-group-toggle">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" 
 :class="'active' : availability.indexOf(tool.tool_id) !== -1">
 <input type="checkbox" :value="tool.tool_id" v-model="availability" >
 tool.tool_name
 </label>
</div>

Here I check if tool_id is in availability then binding active class

share|improve this answer

answered Mar 23 at 16:17

dagaltidagalti

752137

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55315277%2fvue-checkbox-value-not-updating-with-bootstrap-4-data-toggle-buttons%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Codepen : https://codepen.io/anon/pen/MxLyZG

Dont know whats the issue of data-toggle="buttons" with vuejs. When you click the checkbox that actually toggle 'active' class to the checkbox. you can toggle active class using vue. update the code with

<div class="btn-group-toggle">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" 
 :class="'active' : availability.indexOf(tool.tool_id) !== -1">
 <input type="checkbox" :value="tool.tool_id" v-model="availability" >
 tool.tool_name
 </label>
</div>

Here I check if tool_id is in availability then binding active class

share|improve this answer

answered Mar 23 at 16:17

dagaltidagalti

752137

add a comment | 

0

Codepen : https://codepen.io/anon/pen/MxLyZG

Dont know whats the issue of data-toggle="buttons" with vuejs. When you click the checkbox that actually toggle 'active' class to the checkbox. you can toggle active class using vue. update the code with

<div class="btn-group-toggle">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" 
 :class="'active' : availability.indexOf(tool.tool_id) !== -1">
 <input type="checkbox" :value="tool.tool_id" v-model="availability" >
 tool.tool_name
 </label>
</div>

Here I check if tool_id is in availability then binding active class

share|improve this answer

answered Mar 23 at 16:17

dagaltidagalti

752137

add a comment | 

Codepen : https://codepen.io/anon/pen/MxLyZG

Dont know whats the issue of data-toggle="buttons" with vuejs. When you click the checkbox that actually toggle 'active' class to the checkbox. you can toggle active class using vue. update the code with

<div class="btn-group-toggle">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" 
 :class="'active' : availability.indexOf(tool.tool_id) !== -1">
 <input type="checkbox" :value="tool.tool_id" v-model="availability" >
 tool.tool_name
 </label>
</div>

Here I check if tool_id is in availability then binding active class

share|improve this answer

answered Mar 23 at 16:17

dagaltidagalti

752137

<div class="btn-group-toggle">
 <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" 
 :class="'active' : availability.indexOf(tool.tool_id) !== -1">
 <input type="checkbox" :value="tool.tool_id" v-model="availability" >
 tool.tool_name
 </label>
</div>

share|improve this answer

answered Mar 23 at 16:17

dagaltidagalti

752137

answered Mar 23 at 16:17

dagaltidagalti

752137

answered Mar 23 at 16:17

dagaltidagalti

752137