I'm using Element UI library in Vue.
I have a set of two radio buttons, and also a dropdown list that need to share the same data. I have everything working as expected however when the user selects one of the radio buttons the dropdown is displaying that value.
My end goal is to have the dropdown display the placeholder text unless of course a dropdown value is selected. Possibly a watcher to check if radios are selected and then update dropdown?
<template>
<div>
<el-radio-group ref="selfLanguage" v-model="formData.selfLanguage">
<ol>
<li class="radio-list-item">
<el-radio
id="selfLanguageEnglish"
label="English"
name="selfLanguage"
class="radio--bold"
/>
</li>
<li class="radio-list-item">
<el-radio
id="selfLanguageSpanish"
label="Spanish"
name="selfLanguage"
class="radio--bold"
/>
</li>
</ol>
</el-radio-group>
<el-form-item
prop="selfLanguage"
:show-message="false"
class="form-item--select el-form-item--dropdown"
>
<label for="selfLanguage" class="font--primary title-3 font--bold mb-6">
Other
</label>
<el-select
ref="selfLanguageDropdown"
v-model="formData.selfLanguage"
name="selfLanguage"
class="select-box"
prop="selfLanguageOther"
placeholder="Please select one"
:popper-append-to-body="false"
>
<el-option label="French" value="french"></el-option>
<el-option label="Russian" value="russian"></el-option>
<el-option label="Italian" value="italian"></el-option>
</el-select>
</el-form-item>
</div>
</template>
<script>
export default {
watch: {
'formData.selfLanguage'(newVal, oldVal) {
if (newVal === 'English' || newVal === 'Spanish') {
// possibly reset the dropdown or have it display the placeholder text rather than data value
}
},
},
}
</script>
The dropdown shows the same value because you share the same model as other select. If you want to do some computation with a logic over selfLanguage you can have two separata models (selflanguage , selfLanguageOther) and then define a computed variable to decide which language is going to be final/selected one.
You can use something like this.
const selfLanguage = computed(
() => language.primaryLanguage ?? language.selfLanguageOther
)
Related
I am creating an online multiple choice exam and I cant work out why when I dynamically create radio buttons using a v-for the user has the ability to select multiple buttons?? I want the user to only select one button at a time. Currently, the user has to deselect the original option and then select another button.
Here is my code:
<label
v-for="(value, index) in newObject[idx]"
:key="index"
class="block mt-4 border border-gray-600 rounded-lg py-2 px-6 text-lg"
:class="
{
'hover:ring-indigo-700 hover:border-indigo-700 cursor-pointer':
selectedAnswer == '' || selectedAnswer !== '',
},
{
'ring-4 ring-indigo-700 border-indigo-700': selection(
answersArray,
value
),
}
"
>
<input
:id="value"
type="radio"
class="hidden"
:value="value"
#click="answered($event)"
/>
{{ value }}
</label>
Please halp.
You have to give these radio buttons same name. This will make them part of a group and only one radio button will be selectable at a time.
<input name="abc" type="radio"/>
I try to display my selected checkboxes, which I render like this:
<pre>{{ JSON.stringify(selectedAttributes, null, 2) }}</pre>
<ul
class="list-unstyled"
v-for="category in categories"
:key="category.name"
>
<strong>{{ category.category_name }} </strong>
<li
v-for="attributes in category.attributes"
:key="attributes.attribute_id"
>
<Field
as="input"
name="attribute"
type="checkbox"
class="form-check-input"
v-model="selectedAttributes"
:id="attributes.attribute_id"
:value="attributes.attribute_id"
/>
<label class="form-check-label" for="attributes.attribute_id">
{{ attributes.attribute_name }}
</label>
</li>
</ul>
...
data() {
return {
selectedAttributes: [],
};
},
Unfortunately, the attribute_id of my selected checkboxes is not showing. Where is my mistake?
Update: The data from my api looks like this:
What I need here is, I want the user to check his preferred options and display the selected options in the JSON.stringify. The selectedAttributes should display the attribute_id of the chosen option.
Your data does not have attribute_id id property at all. Only attribute_name you can see at the image you provided
I searched the net and tried all solutions for similar questions from SO, but just can't get this one working.
I am working in Django admin, and I have RadioSelect widget for the field is_valid, with two radio buttons in the form:
<div class="form-row field-is_valid">
<div>
<label for="id_is_valid_0">Is it valid?</label>
<ul id="id_is_valid" class="inline">
<li><label for="id_is_valid_0"><input type="radio" name="is_valid" value="True" id="id_is_valid_0" checked>
Yes
</label>
</li>
<li><label for="id_is_valid_1"><input type="radio" name="is_valid" value="False" id="id_is_valid_1">
No
</label>
</li>
</ul>
</div>
</div>
<div class="form-row field-not_valid_reason">
<div>
<label for="id_not_valid_reason">Reason:</label>
<select name="not_valid_reason" id="id_not_valid_reason">
<option value="" selected>Choose</option>
<option value="Expired">Expired</option>
<option value="Not adopted">Not adopted</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
I want to hide a class .field-not_valid_reason when 'Yes' (True) is checked (which is default for is_valid field) and show it when I click 'No'. This I accomplished.
Here is my jQuery code:
(function($) {
$(function() {
var isValid = $('input[type=radio][name=is_valid]'),
notValidReason = $('.field-not_valid_reason'),
function toggleFields(value) {
if (value === 'True') {
notValidReason.hide(250);
} else {
notValidReason.show(250);
}
}
// show/hide on load based on previous value of isValid
toggleFields(isValid.val());
// show/hide on change
isValid.change(function() {
toggleFields($(this).val());
alert(isValid.val());
});
});
})(django.jQuery);
But, for some reason, after the object is saved in the database with the is_valid field False, when I am on the change page of that object, the class .field-not_valid_reason is hidden, albeit active radio button is set to "No" (False).
Can you help, please?
In your current jquery code you where using alert(isValid.val()); to see which option is selected but this will give you first value only so to get current value which user has selected use $(this).val().
Then , onload you where getting right value for radio but the div was still hidden because you are again passing toggleFields(isValid.val()); which will give you first value only .So , to overcome this pass radio value which is checked i.e : $("input[name='is_valid']:checked").val() .
How can I get a list of all check boxes that I selected with Vue?
This is my HTML which works and shows me a list of my products with a checkbox.
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product.id" name="product" type="checkbox" />
<label :for="product.slug"><span></span></label>
</li>
What I want is that when I click on a button, it fetches all check boxes that I selected. And give me all the values.
But I can't figure out how to do it, because it'll break when I even try to add a v-model to the checkbox.
Just bind every checkbox value with a product and the v-model to the array checkedProducts
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product" name="product" type="checkbox" v-model="checkedProducts" />
<label :for="product.slug"><span></span></label>
</li>
...
data(){
return{
...
checkedProducts:[]
....
}
}
I am using AngularJS, Ionic (v 1) frameworks. On load of the mobile app screen, the checkboxes are to displayed as checked & then user may check or uncheck the checkboxes. The checkboxes are checked on load fine, however, when first time user unchecks a checkbox then the checkbox status value is undefined even though the checkbox is seen to be unchecked. After this when it is checked then it works fine whereby either the checkbox value is true or false depending upon if user checked it or unchecked it. Below if the html section of the code that is displaying the nested ng-repeat and checkboxes displayed. Also, there are multiple checkboxes that can be displayed and that is why second ng-repeat is used to load all the values for the checkboxes. Below the HTML code is the Javascript functions in controllers.
The togglegroup & isgroupshown functions are used to show or hide the checkboxes when the user clicks on the icon next to Extras.
HTML
<form name="list" class="list">
<div ng-repeat="(i, item) in menu_items track by $index">
<div class="item item-divider">
{{item.p_name}}
</div>
<select ng-show="item.Customizable == 1" ng-model="data.cmbIngredient[i]">
<option selected="selected" value="">Select the size</option>
<option ng-repeat="x in item.ProductSizes" value="{{x}}">
{{x.ProductName}}: €{{x.ProductPrice | number:2}}
</option>
</select>
<div>
{{item.p_description}}
</div>
<!-- if the Extras value equates to 1 then the checkbox is displayed-->
<div ng-show="item.Extras == 1">
<i ng-click="toggleGroup(item)" class="icon balanced icon" ng-class="isGroupShown(item) ? 'ion-minus' : 'ion-plus-round'"></i> Extras
<label ng-repeat="(j, ext) in item.ExtraDetails track by $index" class="checkbox" ng-show="isGroupShown(item)">
<input type="checkbox" ng-checked="1" ng-change="AddExtras(data.data[j].chkextras[i],item.p_id)" ng-model="data.data[j].chkextras[i]"> {{ext.CIngredientName}}
</label>
</div>
</div>
</form>
Controller functions
$scope.AddExtras=function(extraStatus,pid){
if(extraStatus == true){
//pass it to service
}
else if (extraStatus == false){
//pass it to a service
}
};
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
If you read the docs for ng-checked you can clearly read what causes the issue:
Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.
Conclusion: you should either use ng-checked or ng-model and not mix both.
You should be looking for something like this.
ng-true/false-value