Styjun

Large drywall patch supports

How to be diplomatic in refusing to write code that breaches the privacy of our users

Sequence of Tenses: Translating the subjunctive

Sort a list by elements of another list

Inappropriate reference requests from Journal reviewers

Was Spock the First Vulcan in Starfleet?

Unreliable Magic - Is it worth it?

What does the word "Atten" mean?

Is oxalic acid dihydrate considered a primary acid standard in analytical chemistry?

Lay out the Carpet

India just shot down a satellite from the ground. At what altitude range is the resulting debris field?

Trouble understanding the speech of overseas colleagues

Hostile work environment after whistle-blowing on coworker and our boss. What do I do?

Term for the "extreme-extension" version of a straw man fallacy?

Why are there no referendums in the US?

Is expanding the research of a group into machine learning as a PhD student risky?

How can I kill an app using Terminal?

What is the opposite of 'gravitas'?

CREATE opcode: what does it really do?

Is exact Kanji stroke length important?

Risk of infection at the gym?

Class Action - which options I have?

How do scammers retract money, while you can’t?

Did the DC-9 ever use RATO in revenue service?

Binding a button to a model?

Vue.js get all v-model bindingsVuejs Model Binding ErrorVue binding value to inputHow to defer form input binding until user clicks the submit button?How do I bind a class if the input type attribute is checkbox? + Vuejsv-model in one component interfering with another component's v-modelDuplicate a select element and dynamically add v-modelVue js how to use props values to v-modelbootstrap-vue issues with checkboxes in b-tableUsing v-bind and v-on instead of v-model vuejs

0

I have binded a checkbox (output from options data in a loop):

<input type="checkbox" v-model="option.active">

options: [
 
 name: 'one',
 active: false,
 ,
 
 name: 'two',
 active: false,
 ,
 ....
]

I also want a button to be able to turn off the checkbox.

How can I also bind a button to the model?

vue.js vuejs2

share|improve this question

asked Mar 21 at 15:58

panthropanthro

7,36033107207

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  <button @click="option.active = false">Click</button>
  
  – thanksd
  Mar 21 at 15:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks - anyway to move that to a method?
  
  – panthro
  Mar 21 at 16:02
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes, there is. Take a look at the Vue documentation and then maybe post a separate question if there is something specific that you don't understand about how event handling works in Vue.
  
  – thanksd
  Mar 21 at 16:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, I know how to pass data to methods, but passing option.active will just pass true, how to I pass the reference to the option.active in the data object?
  
  – panthro
  Mar 21 at 16:13
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Pass option as the param and then in the method: option.active = false
  
  – thanksd
  Mar 21 at 16:36
  

  
  
  
  

add a comment | 

0

I have binded a checkbox (output from options data in a loop):

<input type="checkbox" v-model="option.active">

options: [
 
 name: 'one',
 active: false,
 ,
 
 name: 'two',
 active: false,
 ,
 ....
]

I also want a button to be able to turn off the checkbox.

How can I also bind a button to the model?

vue.js vuejs2

share|improve this question

asked Mar 21 at 15:58

panthropanthro

7,36033107207

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  <button @click="option.active = false">Click</button>
  
  – thanksd
  Mar 21 at 15:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks - anyway to move that to a method?
  
  – panthro
  Mar 21 at 16:02
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yes, there is. Take a look at the Vue documentation and then maybe post a separate question if there is something specific that you don't understand about how event handling works in Vue.
  
  – thanksd
  Mar 21 at 16:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, I know how to pass data to methods, but passing option.active will just pass true, how to I pass the reference to the option.active in the data object?
  
  – panthro
  Mar 21 at 16:13
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Pass option as the param and then in the method: option.active = false
  
  – thanksd
  Mar 21 at 16:36
  

  
  
  
  

add a comment | 

I have binded a checkbox (output from options data in a loop):

<input type="checkbox" v-model="option.active">

options: [
 
 name: 'one',
 active: false,
 ,
 
 name: 'two',
 active: false,
 ,
 ....
]

I also want a button to be able to turn off the checkbox.

How can I also bind a button to the model?

vue.js vuejs2

share|improve this question

asked Mar 21 at 15:58

panthropanthro

7,36033107207

<input type="checkbox" v-model="option.active">

options: [
 
 name: 'one',
 active: false,
 ,
 
 name: 'two',
 active: false,
 ,
 ....
]

share|improve this question

asked Mar 21 at 15:58

panthropanthro

7,36033107207

share|improve this question

asked Mar 21 at 15:58

panthropanthro

7,36033107207

asked Mar 21 at 15:58

panthropanthro

7,36033107207

asked Mar 21 at 15:58

panthropanthro

7,36033107207

1 Answer
1

active

oldest

votes

1

You have to use the click event of the button :

<button v-on:click="option.active = false">Click</button>
// or
<button @click="option.active = false">Click</button>

share|improve this answer

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666

New contributor

Atu Lrnt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

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%2f55284536%2fbinding-a-button-to-a-model%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You have to use the click event of the button :

<button v-on:click="option.active = false">Click</button>
// or
<button @click="option.active = false">Click</button>

share|improve this answer

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666

New contributor

Atu Lrnt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

1

You have to use the click event of the button :

<button v-on:click="option.active = false">Click</button>
// or
<button @click="option.active = false">Click</button>

share|improve this answer

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666

New contributor

Atu Lrnt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

You have to use the click event of the button :

<button v-on:click="option.active = false">Click</button>
// or
<button @click="option.active = false">Click</button>

share|improve this answer

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666

New contributor

Atu Lrnt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

<button v-on:click="option.active = false">Click</button>
// or
<button @click="option.active = false">Click</button>

share|improve this answer

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666

New contributor

Atu Lrnt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666

New contributor

Atu Lrnt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

answered Mar 21 at 16:59

Atu LrntAtu Lrnt

666