I have a table with the option to edit each row. When I click on edit, a form pops up and shows the fields filled out with the data to edit. However, the selected radio button is not showing with the data selected before as a value, I only got the two radio buttons unchecked.
How can I make the correct radio button show the correct checked value?
This is my code
<v-card-subtitle class="py-1"> CONTRACT TYPE </v-card-subtitle>
<v-radio-group v-model="dataItem.type_contract" row class="ml-3">
<v-radio name="dataItem.type_contract" label="DIRECTO" value="direct" ></v-radio>
<v-radio name="dataItem.type_contract" label="CONTINGENCIA" value="contingency" ></v-radio>
</v-radio-group>
On the data I have this
dataItem: new ContractModel(),
Thanks for the help!
I found a solution that works for my case
I had to change the v-model on the v-radio-group and set it to a prop like this
<v-radio-group v-model="radioGroup" row class="ml-3">
<v-radio label="DIRECTO" value="direct"></v-radio>
<v-radio label="CONTINGENCIA" value="contingency"></v-radio>
</v-radio-group>
on Data
radioGroup: 'direct',
And because the edit modal is activated by a button I set the values like this
{
icon: "mdi-pencil",
description: "Editar",
action: (params) => {
this.modeEdit = true;
this.dialogAddEdit = true;
this.dataItem = JSON.parse(JSON.stringify(params[0]));
if (this.dataItem.type_contract === "DIRECTO") {
this.radioGroup = 'direct';
} else{
this.radioGroup = 'contingency';
}
},
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 have a table with a list of records and each record with two associated radio buttons, one to confirm payment and another to reject, when I pick up on any of the radio buttons I get a modal screen with two buttons, one to definitively confirm a payment and the other to cancel if the wrong radio button is marked, what I need is that when I click on the cancel button, the radio button that I had initially marked is unchecked
See Image 1
See Image 2
This is my code in Vue:
<v-col class="text-center">
<span class="radio-registered pt-1 px-1">
<input type="radio"
#change="dlgComments = !dlgComments; setUpdateData(1, 2, flt.user_payment_id, flt.payment_amount, flt.pay_date, flt.email, flt.user_name, flt.due_concept, flt.payment_reference, flt.student_due_detail_id); sendInfo(flt), sendInputId(`filter${f}`)"
:name="`filter${f}`"
:checked="false">
</span>
</v-col>
<v-col class="text-center">
<span class="radio-rejected pt-1 px-1">
<input type="radio"
#change="dlgComments = !dlgComments; setUpdateData(2, 3, flt.user_payment_id, flt.payment_amount, flt.pay_date, flt.email, flt.user_name, flt.due_concept, flt.payment_reference, flt.student_due_detail_id); sendInfo(flt)"
:name="`filter${f}`"
:checked="false">
</span>
</v-col>
</v-row>
I'm relatively new to Vue and I don't know which property I should add. Thanks sorry for my English !!!
You would need to add a key in data to manage the checked state of the radio, for example 'isChecked':
data () {
return {
isChecked: true,
}
}
Bind checked state of the input to the data property:
<input type="radio":checked="isChecked">
Set the click event of another button to toggle/clear the check (depends on what you want to do) to a function that change the data property (for example I want to toggle the radio button):
<button #click="toggleCheckedState">Toggle</button>
And the function to toggle the state (defined in methods):
methods:{
toggleCheckedState(){
this.isChecked = !this.isChecked; //example
//your logic
},
}
I'm trying to customize an out-of-the-box form in Vue.js where inputs are shown/hidden depending on the selection of 2 radio buttons:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
I have defined isOperator in the data (am I defining data correctly? I'm trying to modify the out-of-the-box code, not sure what this means):
export default {
name: 'User-Details',
components: {...},
props: {...},
data () {
let data = {
...
isOperator: true,
...
};
and I'm trying to make this show/hide a button and input fields. I'm starting with the button as it seems simpler:
<b-button v-show="isOperator === true" #click="save" :block="true" size="lg" variant="primary" active-class="ssrv-form-button" class="ssrv-form-button">
{{$t("common.form.signUp")}}
</b-button>
My current problem, is the button isn't showing/hiding based on the two radio buttons. If I make isOperator: true in the data, the page loads with the 2nd radio button selected and the button showing. When I click the second radio button, it disappears. But then when I click the original radio button again, the button doesn't show back up. I get the same result when I try to show/hide an input field, I can get it to show initially by setting isOperator to true, but then when I select the other radio button to make it disappear I can't make it appear again. If isOperator is set to false, it just never shows.
I put a isOperator is {{ isOperator }} p element and I can see the value is change true/false as expected, but the buttons/inputs aren't showing back up.
From my very limited understanding of Vue.js, I set the v-model to a variable I want an element to modify, and the value what that variable will be set to when the radio button is selected. Then on a separate element I want to show/hide, I can use v-if/v-show with "myvalue === true/false" to show/hide. Is this an oversimplification and I'm missing steps?
That's because of a mismatch in the type of isOperator property. When you first mount the component the value of isOperator is a boolean (true), and then later on when you click on the radio buttons it becomes a string. You need to adjust the value property in your template as below:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" :value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" :value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
I have created a dropdown menu in vuetify which looks like this:
[![enter image description here][1]][1]
`
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">
Details
</v-btn>
</template>
<v-list>
<v-list-item>
<v-form ref="form">
<v-radio-group v-model="metrics" required>
<v-radio
label="ABC"
value="abc"
></v-radio>
<v-radio label="XYZ" value="xyz"></v-radio>
</v-radio-group>
<v-divider></v-divider>
<v-radio-group v-model="order" required>
<v-radio
label="Higher"
value="higher"
></v-radio>
<v-radio
label="Lower"
value="lower"
></v-radio>
</v-radio-group>
<v-divider></v-divider>
<v-btn
#click="
sortTableData(
metrics,
order,
$props.tableItems
)
"
>
Apply
</v-btn>
</v-form>
</v-list-item>
</v-list>
</v-menu>`
however,
when I click the Dropdown and select for eg:Installs, the menu
closes..
I have to click the Dropdown again to choose higher/lower..
and the menu closes again..
And again I have to click the Dropdown to Click "Apply" button.
Question : Is there Any way I can hold this menu until I click "Apply"?
Thanks a lot in advance for your help !
Ok, the idea here is to manually handle the dropdown visibility instead of letting Vuetify controls this.
To do so, you need to:
add a :close-on-content-click="false" on your <v-menu> (doc)
add a v-model directive binded to a "data" boolean value (ex: v-model="isDropdownDisplayed"), initialized to false (closed dropdown at load)
The first prop tells Vuetify to not close the dropdown when clicking on content (only an outside click will do it), while the second prop is linking the dropdown visilibity to your custom data boolean value.
As your "data" boolean value is initialized to false (closed dropdown) and is automatically updated to true via the v-model when opening the dropdown, the left thing to do is to pass this value to false on your sortTableData method.
Assuming you're using SFC (but the approach is the same for pure JS components):
Template
<v-menu offset-y :close-on-content-click="false" v-model="isDropdownDisplayed">
...
</v-menu>
Script
{
name: 'MyComponent',
data: function () {
return {
isDropdownDisplayed: false
}
},
methods: {
sortTableData: function (/* args */) {
// ...
this.isDropdownDisplayed = false
// ...
}
}
}
How to focus v-radio-group selected radio programmatically ?
<v-radio-group v-model="radios" :mandatory="false" ref="RadioGroup">
<v-radio label="Radio 1" value="radio-1"></v-radio>
<v-radio label="Radio 2" value="radio-2"></v-radio>
</v-radio-group>
I tried with this.$refs.RadioGroup.focus() but nothing happens.
Thank you in advance
Two things
Vuetify adds divs and inputs to the DOM, so you need to dig in to the referenced element's children a little
you probably want to target one of the radio buttons since focusing the group seems to have no effect
This works, so might give you a idea to work with
<v-radio-group v-model="radios" :mandatory="false" ref="RadioGroup">
<v-radio label="Radio 1" value="radio-1" ref="Radio1"></v-radio>
<v-radio label="Radio 2" value="radio-2" ref="Radio2"></v-radio>
</v-radio-group>
this.$refs.Radio2[0].$el.children[0].children[0].focus()
Tested with this listener
created() {
document.addEventListener('focusin', event => {
console.log('focused', event.target)
})
},
Try using a custom directive. Add 'radio-focus' as a directive to the Vue Instance Add the v-radio-focus directive as an attribute to the v-radio element you wish to focus on. More about directives here.
'radio-focus': {
// directive definition
inserted: function (el) {
const $el: HTMLElement = el.children[0].children[0] as HTMLElement
$el.focus()
}
}