I am trying to make a v-radio update a v-model value automatically but cannot get it working.
I have already achieved this with a check box like this:
<v-checkbox
v-model="arr1[index].isDone"
:disabled="checkRecordStatus(index)"
></v-checkbox>
With this code the isDone value for the specific array element is automatically assigned a value of true when the box is checked. That is, I don't need to call a function to set the value on the array element.
I am trying to achieve the same thing with a v-radio. Here is what I have:
<v-radio
v-model="arr1[index].isDone"
#change="radioSelect(index,'true')"
></v-radio>
I can get the value from the radioSelect function and set it on the model from there, but I am wondering if there is a way to do it without creating and calling a function, as with the checkbox example. I assumed that a selected v-radio would just set a true value on whatever was on v-model, but I seem to be missing something. I've had a look at the documentation and can't see anything that handles it.
Thanks for any help in advance!
From the base Vue docs, it looks like the way to override the default behaviour of a radio passing a string value is to also use v-bind:value, so you could do something like this I think (tested with a vanilla Vue2 component)
I am less familiar with Vuetify but if the component can accept v-bind the below should work:
<v-radio
v-model="arr1[index].isDone"
v-bind:value="true"
></v-radio>
https://v2.vuejs.org/v2/guide/forms.html#Radio-1
Related
I am trying to emit a custom event from a very rare situation.
I have a tab component where every slot inside has a name with 'row' and 'col' and each one corrisponds to <td>content here</td>, i must check inside the component if the slot is empty.
I am trying to emit a custom event 'no-content' only when the slot is actually empty.
My example
<my-component :meta-data="!$slots['td-'+row+'-'+col] ? $emit('no-content', 'td-'+row+'-'+col) : ''"
<slot :name="'td-'+row+'-'+col">
</slot>
</my-component>
is it actually possible to achieve this result with Vue.js? i tried myself and also searched for a case similar to mine but i found nothing.
PS: I actually spent a little more time trying to make it work but i had a problem with the component itself, so i started all over again but insted of using slots I work with an array of objects in input, now i reached the result I wanted to.
I'm gonna leave this here just in case someone else thinks about a solution with meta-data.
I have two way binding of property with v-switch input. I'm using v-bind:value as given
<v-switch
v-bind:input-value="tabs"
label="Show Tabs"
#change="(val) => $sync('tabs', !!val)"
/>
The issue is, when the value is supplied from the prop, sometimes switch renders according to the data supplied and sometimes not. v-bind:input-value does the job, but want to understand the underlying problem so that I can contribute to the library itself.
I have this angular component on the page which has all the options binded.
Using jQuery, I was able to retrieve the correct selected value with the following:
$('#mat-select').val(); // returns me the id of the selected option
However, when I try to update the value with jQuery, the value is updated but not reflected on the component on the screen.
eg.
$('#mat-select').val(); // eg. returns 'mat-select-option-0'
$('#mat-select').val('mat-select-option-5').trigger('input').trigger('change');
$('#mat-select').val(); // returns me 'mat-select-option-5'
Yet, the selected value on the component still appears to be mat-select-option-0. I am guessing that I am just setting the dom's value attribute and not updating the angular component but couldn't figure out how.
Can someone please advise?
It is not recomended to use jQuery together with Angular, because they bouth are manipulating with dom in their own way try using https://ng-bootstrap.github.io/#/getting-started
That will allow you to avoid many future problems.
I'm working on this dynamic filter system using AngularJs and trying to figure out how to convert the color and size options to be in two dropdowns (one for each category).
I've tried the following code which does successfully add the dropdown along with the options in the select box, but upon click of one of the options, it doesn't select it.
<md-select ng-model="filter[cat][value]" placeholder="val" multiple>
<md-option ng-repeat="value in getItems(cat, data)" ng-value="{{value}}" ng-init="filter[cat]={}">
{{value}}
</md-option>
</md-select>
Demo: https://codepen.io/mikelkel/pen/rwQKRm (Above code had been removed from this demo.)
There are a few issues:
According to the documentation, multiple is a boolean so it needs to be multiple="true".
value in ng-model doesn't exist in that scope since it only exists in md-option, so you can't do filter[cat][value]. If you look at the documentation for md-select you will see that when using multiple the model is an array. So if you set your ng-model to simply filter[cat] then its value will be something like ["red","yellow"].
You can then modify filterByPropertiesMatchingAND so that it does a string match against like properties (so if the shirt color is red and the filter.color array contains red then you would return true).
I forked your codepen (https://codepen.io/czema/pen/KqbpPE) and made the following changes:
Even though ng-init is frowned upon I left it, but I initialized the filter[cat] to an array rather than an object.
I removed the md-item.
I set ng-model to filter[cat] and multiple="true"
In the Javascript I modified your filterByPropertiesMatchingAND function. Now it expects $scope.filter contain arrays for each property (rather than an object with color names and boolean values). I dropped the noSubFilter function.
Use ng-options in select rather than ng-repeat on the option tag. The syntax for ng-options is a little odd, but it would be something like this in your case: ng-options="value for value in getItems(cat, data)"
Read the documentation for ngOption https://docs.angularjs.org/api/ng/directive/ngOptions
As far as why your attempt above doesn't work, probably has something to do with the ng-init, which is being executed for each option and is probably wiping out any existing data. Don't use ng-init.
I've been trying to get a function to happen whenever I press a checkbox in a datatable. Basically what I have is a datatable with default values in it (1 to 10 for example). Then I give an array of items to my component which are present in an object of mine (2 & 5 for example). now when the grid is constructed It'll all the default elements in the dataTable but Only the data that is in our object will have a checked checkbox next to them. Now what I want to do is to have my addOrRemove function executed wich depending on the state of the checkbox will add or remove a default data object from the array ([2,5] in this case). So 2 or 5 can be unchecked and thus removed from the array and 1,3,4,6,7,8,9,10 can be checked and added to the array.
I don't realy have a problem writing the code for this but I'm struggling to have my function being executed whenever I press the checkbox.
this is how I have my checkbox defined in my html file:
<p-column header="Included" [style]="{'width':'80px', 'text-align':'center'}">
<template let-object="rowData" pTemplate="body">
<p-checkbox binary="true" [(ngModel)]="object.included" (change)="addOrRemoveRow($event,object.data)"></p-checkbox>
</template>
</p-column>
using this I'm not getting any functions triggered.
In the PrimeNg documentation there is stated that p-checkbox has an event onChange. but whenever I use that I'm getting the error.
EXCEPTION: Error in http://localhost:3000/app/shared/grid/checkable-grid/checkable-grid.component.html:9:12 caused by:
self.parentView.context.addOrRemoveRow is not a function
That is whenever I change the (change) to (onChange).
I've read that it has something to do with my checkbox being inside of a template and therefore there is no direct access to my component and its functions. Any help on this would be much appreciated.
The answer to this question is:
Make sure you take enough breaks and read your code carefully. In my component I have a function called addOrRemove(), in my html I had addOrRemoveRow().