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>
Related
I have a paragraph in my app, in which the user can translate it at the click of a button. I interpolate the text seen via my props (props.row.text) and my data (this.data.translatedText).
The data property is empty/null until the button is cliked, which therefore causes me to receive the error "data is null" in my Console. I attempt to fix this with the code below, however, this throws me error but does not display the interpolated text after the button click.
Does anyone have a suggestion for how best to structure this, so that the {{ props.row.text }} is replaced by {{ this.data.translatedText }} after the button is clicked?
Component.vue
<span id="translationButton">
<translation-button #click="calltranslatedText()" #changeTitle="ChangeT" />
</span>
<div class="ticket-text-container">{{ props.row.text }}</div>
<div class="ticket-text-container" v-if="calltranslatedText()">{{ this.data.translatedText }}</div>
methods: {
ChangeT(title)
{
this.translatedText = title
},
calltranslatedText() {
return true
},
Firstly don't use this and data in the template just indicate a prop name you defined in data function.
Secondly, you can just use translatedText in v-if to show div with the translated text.
<div class="ticket-text-container" v-if="translatedText">{{ translatedText }}</div>
Don't forget to set translatedText to an empty string or null to hide this block again if needed.
This is the first time I am using modal component. Inside a for loop of an array of objects, I also added a modal component, "Add Item". The v:onClick="showSectionID" function in the SHOW button within the modal should just consolelog the id of the object who's associated modal was opened and click it's respective SHOW button. But instead it is giving the id of the last object wherever I click the SHOW button from any of associated modals.
Just to test, I removed the whole modal and only kept the SHOW button and in this case it gives me the correct id. I really cannot figure out what s is wrong in the modal and searched several sources in the internet to see a similar solution but couldn't find. See code:
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">
<h4>Section Name: {{ section["sectionName"] }}</h4>
<h4>Section Description: {{ section["sectionDescription"] }}</h4>
<template>
<div>
<b-button #click="modalShow = !modalShow">Add Item</b-button>
<b-modal v-model="modalShow">Fill form to add an item !
<button v-on:click="showSectionID (section['uuid'])">SHOW</button>
</b-modal>
</div>
</template>
</div>
In your code, you are creating a modal component for each section within the for loop.
I wouldn't be surprised if actually all your modals show up on the screen, but you see the last one because it's on top of all the other ones. But it also depends on how the modal is implemented.
I suggest you to move the modal template outside your for loop and change what you store in your component data so that you know which section to show in the modal.
Let's say your data() will look like this:
data() {
return {
modalVisible: false,
modalSectionUUID: null
}
}
Then you can create two methods to show and hide the modal:
methods: {
showModal(sectionUUID) {
this.modalVisible = true;
this.modalSectionUUID = sectionUUID;
},
hideModal() {
this.modalVisible = false;
this.modalSectionUUID = null;
}
}
Now, your template will finally look something like this:
<b-modal v-model="modalVisible">Fill form to add an item !
<button v-on:click="showSectionID(modalSectionUUID)">SHOW</button>
</b-modal>
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">
<h4>Section Name: {{ section["sectionName"] }}</h4>
<h4>Section Description: {{ section["sectionDescription"] }}</h4>
<template>
<div>
<b-button #click="showModal(section['uuid'])">Add Item</b-button>
</div>
</template>
</div>
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 have a form which includes some hidden and visible elements inside of it and I want to submit some of the elements without validating the hidden ones. At the top of my form there are three radio buttons and they control my form elements. When radiobutton1 selected, some of my form elements become visible and when another radio button is selected, there are some other form elements are visible and some of them are hidden. My question is how am I going to submit my form elements if only they are visible? All of the inputs should be in a single form so I am not allowed to separate them into different forms or different components. What I need to do is when I click the submit button of my form, the form should only submit the visible elements, and it shouldn't send me any error because I left some of the inputs empty (the hidden ones).
I also use Vuedalite so I couldn't figure out how to handle this problem. All of the input fields in the form has the required rule but this rule should be active ONLY IF THEY ARE VISIBLE.
Here is a little code.
<form #submit.prevent="submitForm">
<!-- Content Section -->
<div v-show="showContent">
<!-- Name Field-->
<div>
<div>
<label>Name</label>
<input v-model="name" :class="{'is-invalid' : $v.networkname2GHz.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.name.required && $v.name.$dirty">Name field is required.</small>
</div>
</div>
<!-- Surname -->
<!-- Content Section -->
<div v-show="showContent">
<!-- Surname Field-->
<div>
<div>
<label>Surname </label>
<input v-model="surname" :class="{'is-invalid' : $v.surname.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.surname.required && $v.surname.$dirty">Surnamefield is required.</small>
</div>
</div>
<div show="showContent">
<button type="submit">Save</button>
</div>
</form>
What I want to do is when the user selects the Name radio button only the Name field of the form will be visible and Surname will be hidden, I've done that, no problem. But how do I submit only the name field when surname still empty and has the required rule?
You can use v-if instead of v-show.
The main difference between the two is that, v-if - Only renders the element to the DOM if the expression passes. v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
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?