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
Related
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
)
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:[]
....
}
}
As I mentioned in topic i try do depends checkboxes from dropdownlist. I fill data to my dropdownlist from controller:
#RequestMapping(value = "/all", method = GET)
public List<Warehouse> findAll(){
return warehouseService.findAll();
}
$http
.get('/api/warehouses/all')
.then(function (response) {
$scope.warehouses = response.data;
});
Every Warehouse object have a List with package:
#OneToMany
private List<Package> packages = new ArrayList<>();
Now when i am creating Route and when i select one Warehouse from dropdownlist i wanna fill checkboxes from List from currently selected Warehouse.
Select Warehouse:
<select ng-model="credentials.warehouseStart">
<option ng-selected="credentials.warehouseStart == x" id="startId" ng-value="x" ng-repeat="x in warehouse" >{{x.name}}</option>
</select>
And checkboxes:
<div flex-xs flex="50">
<md-checkbox aria-label="Select All"
ng-checked="isChecked()"
md-indeterminate="isIndeterminate()"
ng-click="toggleAll()">
<span ng-if="isChecked()">Un-</span>Select All
</md-checkbox>
</div>
<div class="demo-select-all-checkboxes" ng-model="credentials.packages" flex="100" ng-repeat="item in packages">
<md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
{{ item.name }} <p> </p>
{{ item.user.firstName }} {{ item.user.lastName }}
</md-checkbox>
</div>
Checkbox fill:
$http
.get('/api/package/all')
.then(function (response) {
$scope.packages = response.data;
});
It is possible if i select one object in Dropdowlist(Warehouse) can i get a object id? Then i think i can get a correct chebkoxes by directive /package/all/{id} ?
I am basing my answer of your comment that every warehouse has a list of packages. That said, I am expecting packages to be a part of your GET call to /api/warehouses/all.
First, I would change your warehouse selection to use ngOptions:
<select ng-model="selected.warehouse"
ng-options="x.name for x in warehouses"></select>
Then, to list the packages:
<div ng-model="selected.packages"
ng-repeat="item in selected.warehouse.packages">
<input type="checkbox"
ng-checked="exists(item, selected)"
ng-click="toggle(item, selected)"> {{ item.name }}
<p> </p>
{{ item.firstName }} {{ item.user.lastName }}
</div>
I have created a sample here. Within, I have added a couple of wrappers around the package list in your ui using ngIf, but that's not necessary, but figured you'd probably have a view area to show based on whether or not a selection was made.
I have a form with a few checkboxes and form is being processed via angularjs. I have no knowledge about angular however I read about it to find a solution to my problem. I want a checkbox to be checked automatically when form is load. When I look at the codes below I don't understand anything so I need your help.
HTML: (I think this dynamically generates a few < li > options in the form GUI)
<ul class="sublist" style="padding-top:{{ $index * 38}}px;" ng-init="index=$index" ng-if="forActive == k" ng-repeat="(k, v) in forData">
<li class="selected" ng-repeat="val in v">
{{ val }}
<input value="{{ k }} > {{ val }}" type="checkbox" class="flc" ng-click="addForValue(k + ' > ' + val)" />
</li>
</ul>
Content of array is this in angular: $scope.design.fors = [Adults > Men,Adults > Plus]
For example, When form is load, checkbox with value = Adults > Men shall be checked.
Thanks in advance
The way I usually handle this is by making my object a little more rich:
$scope.design.fors = [
{ value: "Adults > Men", checked: true},
{ value: "Adults > Plus", checked: false}]
Then in the view you can write something like:
<ul class="sublist">
<li class="selected" ng-repeat="item in design.fors">
<input type="checkbox" ng-model="item.checked" /> {{item.value}}
</li>
</ul>
I have a list with items and checkboxes and want to return the number of checked rows. My directive looks like this:
<ul ng-repeat="person in list">
<li>
<input type="checkbox" ng-model="selected" >
<label ng-class="{blue:list.length>3,red:list.length<=3}"> {{person.name}}</label>
</li>
</ul>
What would be the angular way to display the nr of checked persons?
http://plnkr.co/edit/jJrH44?p=preview
http://plnkr.co/edit/5HzZA23D0P78nEzvmUpf?p=preview
number of checked lines:<span>{{ (list| filter:{selected:true}).length }}</span>
but you should change your list template as
<input type="checkbox" ng-model="person.selected" >
to link checkbox and model value