I have bound 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?
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>
Related
I'm new to vue, I still don't understand everything, tell me. I have buttons that I display through v-for, I need to get the active class of only one button when pressed, all the others need to be turned off, tell me, preferably visually, how can I do it better?
I am using the method activeBtn, but this doesn't turn off the active class from the previous buttons
activeBtn(event, index) {
this.buttons[index].isActive = !this.buttons[index].isActive;
<script>
data() {
return {
buttons: [
{
label: "A",
isActive: false,
type: "border-left",
name: "BorderLeftComonent",
},
{
label: "A",
isActive: false,
type: "text-balloon",
name: "TextBalloonComponent"
},
{
label: "A",
isActive: false,
type: "dashed",
name: "DashedComponent"
},
],
};
},
methods: {
activeBtn(event, index) {
this.buttons[index].isActive = !this.buttons[index].isActive;
}
</script>
<template>
<div id="btn-box">
<button
v-for="(button, index) in buttons"
:key="index"
:class="button.isActive ? 'on' : 'off'"
#click="component = button.name, activeBtn($event, index)">
<div :class="`btn btn-${button.type}`">{{ button.label }}</div>
</button>
</div>
</template>
Since you only want to get one active button at any one point, it doesn't make sense to manage the active state inside each button.
Instead, you should manage it at group level by storing the currently selected button's id. A button would then be active when its id matches the currently selected id.
Here's an example:
new Vue({
el: '#app',
data: () => ({
buttons: [
{
id: "button-1",
label: "A",
type: "border-left",
name: "BorderLeftComonent"
},
{
id: "button-2",
label: "A",
type: "text-balloon",
name: "TextBalloonComponent"
},
{
id: "button-3",
label: "A",
type: "dashed",
name: "DashedComponent"
}
],
activeButtonId: "button-1"
}),
methods: {
activate(id) {
this.activeButtonId = id;
}
}
})
.on {
background-color: red
}
.off {
background-color: blue
}
.on, .off {
color: white
}
<script src="https://unpkg.com/vue#2/dist/vue.min.js"></script>
<div id="app">
<div>
<button
v-for="{id, type, label} in buttons"
:key="id"
:class="activeButtonId === id ? 'on' : 'off'"
#click="activate(id)"
>
<div :class="`btn btn-${type}`" v-text="label" />
</button>
</div>
</div>
I have a form built with bootstrap-vue. The form contains some Radio buttons. I do have a preview button which should show what was selected, but instead of the value from the radio button I would like the label. The radio button code looks something like this:
<b-form-group label="Location">
<b-form-radio-group
v-model="selectedLocation"
:options="options"
:aria-describedby="ariaDescribedby"
name="radio-inline"
></b-form-radio-group>
</b-form-group>
<b-button variant="primary" #click="handlePreview()"><i class="fas fa-clipboard-check"></i> Preview</b-button>
My script looks something like below:
data() {
return {
selectedLocation: '1',
options: [
{ text: 'Location1', value: '1' },
{ text: 'Location2', value: '2' },
{ text: 'Location3', value: '4' }
],
},
methods: {
handlePreview(){
this.preview = true;
this.selectedLocationText = this.selectedLocation.text
console.log(this.selectedLocationText);
},
Is that easily possible to get the Text shown in my Preview? I just cant figure it out myself.
I would do something like this:
this.selectedLocationText = this.options.find(option => option.value === this.selectedLocation)
But remember to define selectedLocationText inside data()
I am using Bootstrap Vue to render a select input. Everything is working great - I'm able to get the value and change the UI based on the option that was selected.
I am trying to change the headline text on my page - to be the text of the selected option. I am using an array of objects to render the options in my select input.
Here is what I'm using for my template:
<b-form-group
id="mySelect"
description="Make a choice."
label="Choose an option"
label-for="mySelect">
<b-form-select id="mySelect"
#change="handleChange($event)"
v-model="form.option"
:options="options"/>
</b-form-group>
Here is what my data/options look like that I'm passing to the template:
...
data: () => ({
form: {
option: '',
}
options: [
{text: 'Select', value: null},
{
text: 'Option One',
value: 'optionOne',
foo: {...}
},
{
text: 'Option Two',
value: 'optionTwo',
foo: {...}
},
}),
methods: {
handleChange: (event) => {
console.log('handleChange called');
console.log('event: ', event); // optionOne or optionTwo
},
},
...
I can get optionOne or optionTwo, what I'd like to get is Option One or Option Two (the text value) instead of the value value. Is there a way to do that without creating an additional array or something to map the selected option? I've also tried binding to the actual options object, but haven't had much luck yet that route either. Thank you for any suggestions!
Solution
Thanks to #Vuco, here's what I ended up with. Bootstrap Vue passes all of the select options in via :options. I was struggling to see how to access the complete object that was selected; not just the value.
Template:
<h1>{{ selectedOption }}</h1>
<b-form-group
id="mySelect"
description="Make a choice."
label="Choose an option"
label-for="mySelect">
<b-form-select id="mySelect"
v-model="form.option"
:options="options"/>
</b-form-group>
JS:
...
computed: {
selectedOption: function() {
const report = this.options.find(option => option.value === this.form.option);
return option.text; // Option One
},
methods: {
//
}
...
Now, when I select something the text value shows on my template.
I don't know Vue bootstrap select and its events and logic, but you can create a simple computed property that returns the info by the current form.option value :
let app = new Vue({
el: "#app",
data: {
form: {
option: null,
},
options: [{
text: 'Select',
value: null
},
{
text: 'Option One',
value: 'optionOne'
},
{
text: 'Option Two',
value: 'optionTwo'
}
]
},
computed: {
currentValue() {
return this.options.find(option => option.value === this.form.option)
}
}
});
<div id="app">
<b-form-group id="mySelect" description="Make a choice." label="Choose an option" label-for="mySelect">
<b-form-select id="mySelect" v-model="form.option" :options="options" />
</b-form-group>
<p>{{ currentValue.text }}</p>
</div>
Here's a working fiddle.
You have an error in your dictionary.
Text is showed as an option.
Value is what receive your variable when option is selected.
Is unneccesary to use computed property in this case.
let app = new Vue({
el: "#app",
data: {
form: {
option: null,
},
options: [{
value: null,
text: 'Select'
},
{
value: 'Option One',
text: 'Option One'
},
{
value: 'Option Two',
text: 'Option Two'
}
]
}
});
Fiddle with corrections
Documentation
I have two button groups which are created from arrays by using v-for directive in Vue Js. When I clicked a button in first button group I need it to be in focused until the other button click in that button group, the focus state does not affected by any other click events, except the other button was clicked in that button group. The buttons are 1.All 2. True, 3. False, 4. None In the initial stage 1.All button has to be focused until the next button clicked in that button group.
Keep track of the active button by adding an active property to each array element:
new Vue({
el: '#app',
data: () => ({
buttons: [
{
text: 'All',
active: true
},
{
text: 'True',
active: false
},
{
text: 'False',
active: false
},
{
text: 'None',
active: false
}
]
}),
methods: {
activate (b) {
this.buttons.forEach(button => {
button.active = button.text === b.text
})
}
}
})
button {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-for="(b,i) in buttons" :key="i" type="button" :style="{ 'background-color': b.active ? 'green' : 'grey' }" #click="activate(b)">{{ b.text }}</button>
</div>
I am building an app using MVC using Jquery(KendoGrid) for displaying data, everything was working fine as per requirement, later we planned to add extra column with button present on each row of the grid, sounds simple, but tried number of ways to add into the application, getting error message "undefined 'node' ..... ", so i had no other options rather than posting here, if any one could able to help me in this will be appreciative, and i used column template on jquery kendo grid thanks
scenario
onclick of that button in specified row it should carry "ID(as shown below)" and redirect to "ActionResult" Controller, where I can further code as per my requirement
code(part of the code)
columns: [
{ field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },
{ field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },
{ field: "BillNumber", Title: "BillNumber", filterable: false, sortable: false,hidden:true },
{ field: "ServiceName", Title: "ServiceName",width:600 },
{ field: "ServiceStatus", Title: "ServiceStatus", width: 150 }
// Creating template column
, {
field: "Action", title: "Is Action", template: "<input type=\"checkbox\" #= Action ? checked='checked' : '' # class=\"check_row\"/> ", editable: false,
// field: "Action",title: "Preview ", template: '<input type="button" class="info" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" />',
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Print All</label>', filterable: false, sortable: false, width: 100,
}
currently I am able to generate checkbox in column, what i need is one more column with button(same as checkbox in each row)
Manjuboyz
Defining a button in a cell is pretty simple... basically you were doing it right.
Example: Define a column as:
columns: [
...
{
title: "Preview ",
template: '<input type="button" class="k-button info" name="info" value="Info" />',
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Print All</label>',
filterable: false,
sortable: false,
width: 100
}
]
Define the template as an input of type button. If you want it to look like a Kendo UI button add k-button class to it.
Then, you can bind a click handler doing:
$(".info").on("click", function() {
var row = $(this).closest("tr");
var item = grid.dataItem(row);
...
});
Where item contains all the data corresponding to the row that you clicked the button.
Running example here : http://jsfiddle.net/m8fsv/1/
EDIT: If what you need is to control / decide showing one or the other, you should change the template to something like:
<script id="template" type="text/kendo-template">
# if (showButton) { #
<input type="checkbox" #= data.Action ? checked="checked" : "" # class=\"check_row\"/>
# } else { #
<input type="button" class="k-button info" name="info" value="Info" />
# } #
</script>
You can check it here: http://jsfiddle.net/OnaBai/m8fsv/12/