I'm using Vue with Vuetify and currently have a form with a group of radio buttons:
<v-radio-group label="Active?">
<v-radio name="active" label="No" value="0" v-bind:checked="active === 0"></v-radio>
<v-radio name="active" label="Yes" value="1" v-bind:checked="active === 1"></v-radio>
</v-radio-group>
On page load, active set to 1:
data: {
active: 1
}
I see the input has checked="checked" but the icon remains as "radio_button_unchecked" so doesn't appear to be checked:
<input aria-label="Yes" aria-checked="false" role="radio"
type="radio" value="1" name="active" checked="checked">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>
Image of vuetify radio button unchecked
If I click the radio button, it changes the icon to radio_button_checked, but on page load that doesn't seem to be happening. How can I get vuetify to load with radio_button_checked if the input it's associated with is checked?
The <v-radio> element does not support a "checked" attribute like <input type="radio"> does. Instead, the currently checked radio button is managed by the <v-radio-group> wrapper.
The following code should work:
<v-radio-group label="Active?" v-model="active">
<v-radio name="active" label="No" :value="0"></v-radio>
<v-radio name="active" label="Yes" :value="1"></v-radio>
</v-radio-group>
According to the Vuetify docs all selection components must include a v-model prop, in this case, v-model="active". The radio group will then have it's value dependant on the "active" variable in your data. If the "active" value equals one of the :value="..." props in the <v-radio> elements, that element will be checked. See also this codepen.
Don't forget to append a : before your value prop or it won't be bound by Vue.
I came across an instance where the v-model solution just wouldn't work with what I was trying to accomplish. I came up with the following work around using the off-icon prop:
<v-radio
:off-icon="item.active ? '$radioOn' : '$radioOff'"
/>
Related
Click on this link to see the IMAGE, I want GSTN1 option hidden from the second radio group since it is getting selected in the first radio group
<template>
<v-radio-group v-model="firstIdRadio">
<v-radio
v-for="n in firstIdArr"
:key="n"
:label="`${n}`"
:value="n"
>
</v-radio>
</v-radio-group>
<v-radio-group v-model="secondIdRadio">
<v-radio
v-for="n in secondIdArr"
:key="n"
:label="`${n}`"
:value="n"
></v-radio>
</v-radio-group>
</template>
<script>
data() {
return {
firstIdRadio: "",
secondIdRadio: "",
firstIdArr: [GSTN1, GSTN2, GSTN3],
secondIdArr: [GSTN1, GSTN2, GSTN3],
}
}
</script>
I am using the Vuetify v-radio-group tag to populate radio buttons, I want the option hidden in the second radio group which got selected in the first radio group. If we take reference to the image provided above, GSTN1 should be hidden from the second radio group as it is selected in the first radio group.
Big thanks for the help.
Totally blank as to how to approach the challenge. The major issue is to know how to conditionally populate the radio options in the second radio group as per the selection done in the first radio group. Since I am using Vuetify, I am stuck on this part.
Array.filter
<v-radio-group v-model="secondIdRadio">
<v-radio v-for="n in secondIdArr.filter(i => i !== firstIdRadio)" :key="n" :label="`${n}`" :value="n"></v-radio>
</v-radio-group>
I'm trying to use Buefy's tooltip with a content slot, so insted of using the label prop to set tooltip's text, I could use HTML tags to format my text.
I tried to check the component source code, and there is indeed a content slot, but it is not working. Here is my code:
<b-tooltip
position="is-left"
>
<template #content>
My <b>content</b> here
</template>
<b-input
v-on:keyup.native.enter="onEnter"
type="password"
v-model="password"
placeholder="Enter Password"
password-reveal
class="custom-input-style password-field"
></b-input>
</b-tooltip>
Check your buefy version, if it is below 0.9.0 then it won't work
With the code below, if I press the "Edit" button, I change the disabled state all the rows, how can I separate this? I mean, once i just want to edit one row.
cols="12"
class="contact-container"
v-for="contact in contacts"
:key="contact.id"
>
<b-form inline>
<b-input
type="text"
:value="contact.name"
:disabled="editMode ? disabled : ''"
/>
<b-input
type="tel"
:value="contact.phoneNumber"
:disabled="editMode ? disabled : ''"
/>
<b-input
type="email"
:value="contact.email"
:disabled="editMode ? disabled : ''"
/>
<b-input
type="text"
:value="contact.title"
:disabled="editMode ? disabled : ''"
/>
<b-button-group>
<button type="button" size="lg" class="btn">
<b-icon-x-circle-fill variant="danger"></b-icon-x-circle-fill>
</button>
<button type="button" size="lg" class="btn" #click="startEdit">
<b-icon-pencil-fill variant="primary"></b-icon-pencil-fill>
</button>
</b-button-group>
Assuming that editMode is part of the components' data. If it's a prop this solution might be a bit tricky to implement.
Set up editMode as an empty object in your component's data. And for the method startEdit it should take, as a parameter, the id of the contact being edited.
So something like this: #click="startEdit(contact.id)". and in the method body, this.$set(this.editMode, contact.id, true). See Reactivity in Depth in Vue docs for information on this.$set.
To check if a row is disabled use :disabled="editMode[contact.id]" (no need for ternary operator checking as it's a boolean)
This approach will make it possible to edit multiple rows at the same time. Though a name such as editedContacts might be better in this case.
I am using a plugin called Vue-Multiselect and have it working pretty good on my app. However, there is a functionality in the plugin that I do no want. How can I safely remove it?
Let me explain: CodeSandBox Collaboration Editor .
Note: To see this flow in action, choose EDIT next to ACME Widget and then search for an on existent user in the multiselect input box.
When a user is searched for in the multiselect input box, and if a match is found, the match pops up for the user to select. That is good. However, when a user is NOT found, there's a placeholder text that says the following: Press enter to create a tag . I do NOT want to give my users the ability to create new tags/options if the option does not exist. How can I remove that functionality from this component?
Here is my multi-select component code:
<multiselect
id="customer_last_name_input"
v-model="values"
:options="options"
label="lastname"
placeholder="Select or search for an existing customer"
track-by="uid"
:loading="isLoading"
:custom-label="customerSelectName"
aria-describedby="searchHelpBlock"
selectLabel
:multiple="true"
:taggable="true"
>
<template
slot="singleLabel"
slot-scope="props"
>{{ props.option.lastname }}, {{props.option.firstname}}</template>
<template slot="option" slot-scope="props">
<strong>{{ props.option.lastname }}</strong>
, {{ props.option.firstname }} —
<small>{{ props.option.email }}</small>
</template>
<!-- <template slot="noResult">Looks like this customer doesn't exist yet.<button class="btn btn-primary" type="button" #click="addCustomer">Add Customer</button></template> -->
</multiselect>
I found the answer. I simply remove the taggle=true prop from the multiselect component.
I'm hoping I'm just missing something simple because I've been looking at this for too long, but I'm stumped.
I have a form with inputs bound to vuejs. I have a group of 2 radio buttons for selecting the "gender", and the binding is working perfectly. If I click on either of the radio buttons, I can see the data change in the vue component inspector.
But I'm trying to change the radio buttons to a Bootstrap 4 button group, and can't seem to get the v-model binding to work. No matter what I try, the gender_id in my vue data is not getting updated when I click either of the buttons in the button group.
The form input values are being fed in through vue component properties, but for simplicity, my data for the radio buttons/button group would look like this:
export default {
data() {
return {
genders: {
1: "Men's",
2: "Women's"
},
gender_id: {
type: Number,
default: null
}
}
}
}
Here is the code I have for the radio button version (which is working properly):
<div class="form-group">
<label>Gender:</label>
<div>
<div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="form-check-input"
name="gender_id"
:id="'gender_' + key"
:value="key"
v-model.number="gender_id">
<label class="form-check-label" :for="'gender_' + key">
{{ gender }}
</label>
</div>
</div>
</div>
Here is the button group version that is not properly binding to the gender_id data in vue.
<div class="form-group">
<label>Gender:</label>
<div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="btn-group-toggle"
name="gender_id"
:id="'gender_' + key"
:value="key"
autocomplete="off"
v-model.number="gender_id">
{{ gender }}
</label>
</div>
</div>
</div>
I've been using the following Boostrap 4 documentation to try to get this working.
https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons
In the documentation for button groups they don't even include the value property of the radio inputs, whereas they do include it in the documentation for form radio buttons.
https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios
Is this for simplicity or do button groups of radio buttons not even return the value of the checked button?
I see other threads stating that buttons groups are not meant to function as radio buttons, but if that's true for BS4, then why would Bootstrap have button groups with radio buttons as they do in their documentation referenced above? If you can't retrieve the checked state, then why not just use a <button> instead of <label><input type=radio></label>?
Any ideas as to what I'm doing wrong and/or not understanding correctly?
Thanks so much!
Thanks so much to #ebbishop for his helpful insights.
The issue was related to vue and bootstrap both trying to apply javascript to the buttons in the button group.
To get around this issue, it was as simple as removing data-toggle="buttons" from the button group. By removing the data-toggle attribute, the bootstrap js is not applied and vue can manage the button group.
Nothing is actually wrong your use of v-model here.
However: you must add the class "active" to the <label> that wraps each radio-button <input>.
See this fiddle for a working example.
Is that what you're after?