I want to unset a field in simpleSchema but the field is neither shown in set or unset under hooks
before:{
update:function(mod){
console.log(mod["$set"]);
console.log(mod["$unset"])
This is what I have done to unset
'mobility.walkerType':{
type:String,
optional:true,
label:"WalkerType",
autoValue:function(){
if(this.siblingField('type').value != "walker"){
this.unset();
}
},
}
Related
I have a Form component in Vue where I import the vue-recaptcha like this:
<template>
... Contains the form and button that triggers onSubmit function
</template>
<script>
import { VueReCaptcha } from 'vue-recaptcha-v3';
Vue.use(VueReCaptcha, {
siteKey: "hard-coded site-key here",
loaderOptions: {
useRecaptchaNet: true,
},
});
export default {
methods: {
async onSubmit(e) {
// Uses the recapatcha and handles errors/success etc.
},
},
};
...
This works since the value for site-key is hard-coded.
However, I wish to be able to pass the site-key as a prop to the Form component and then use this as the site-key.
I tried something as bold as simply creating a prop in the Form component and passing it in as the site-key when setting the vue-recaptcha options, like this:
<script>
import { VueReCaptcha } from 'vue-recaptcha-v3';
Vue.use(VueReCaptcha, {
siteKey: this.siteKey,
loaderOptions: {
useRecaptchaNet: true,
},
});
export default {
props: {
siteKey: String,
},
...
</script>
This does not work because this.siteKey is undefined, as expected. However, is there a way to set the site-key value as the prop siteKey? Maybe there is a way to set the vue-recaptcha plugin options inside the component where this.siteKey isn't undefined, for example in mounted()?
Have you tried to provide the Key to the Form over prop?
<my-form siteKey="<My Site Key>" ...
or
<my-form site-key="<My Site Key>" ...
Pay attention:
You should be careful with components and prop's naming & using, since there are DOM
Template Parsing Caveats
I had a ToggleControl on a block that appears in the InspectorControls area. It is by default on. When I try to set it using the type of boolean it would not save the state properly. When trying to toggle it, it would remain as "on" but the help text would change as if it were off. When saving changes and reloading, the toggle would be back to on.
const defaults: {
autoplay: {
type: 'boolean',
meta: 'autoplay',
default: true
}
}
....
<ToggleControl
label={__('Autoplay')}
help={attributes.autoplay ? __('Slideshow will start playing automatically', 'five') : __('User will have to cycle slideshow manually', 'five')}
checked={(attributes.autoplay || defaults.autoplay.default)}
onChange={() => {
setAttributes({
autoplay: !attributes.autoplay
});
}}
/>
However, if I change that input to be a string and do the boolean handling myself it toggles the input correctly and saves the state:
const defaults: {
autoplay: {
type: 'boolean',
meta: 'autoplay',
default: true
}
}
....
<ToggleControl
label={__('Autoplay')}
help={attributes.autoplay == 'true' ? __('Slideshow will start playing automatically', 'five') : __('User will have to cycle slideshow manually', 'five')}
checked={(attributes.autoplay || defaults.autoplay.default) == 'true'}
onChange={(nextValue) => {
setAttributes({
autoplay: nextValue ? 'true' : 'false'
});
}}
/>
This works, but requires extra characters when checking for truthy when rendering. I could probably make this a little easier by just using a number and using 0 and 1, but that's not the point.
Am I missing something with the boolean type, or is this a bug in Gutenberg?
WP Version: 5.1.1
Your condition inside checked attribute is wrong because it is always evaluating to true. While your help text don't have any of that condition, toggling of help text depends on attributes.autoplay which you are changing inside onChange attribute.
So the solution is to change your condition on checked attribute.
Attributes inside registerBlockType can define default values by using default key inside any attribute so the recommended way is to use that. (default attribute example from wordpress cover block)
I was trying to use the drop down filter on Kendo Grid. But i am getting the error,
Invalid prop: type check failed for prop "filterable". Expected Boolean, got Object.
<kendo-grid-column :filterable="{
ui: statusFilter,
operators: {
string:{
eq : 'Is equal to'
}
}
}" field="status" title="Client Status" width="10%"></kendo-grid-column>
Status Filter Method
statusFilter(element) {
this.$http.get("list/getclientstatus").then(({ data }) => {
element.kendoDropDownList({
dataSource: data,
dataTextField: "text",
dataValueField: "value",
optionLabel: "--Select Value--"
});
});
I am using kendo vue-templates on grid for action method which is only available as the props.
https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/
The version of kendo grid i am using : 2018.2.516,
So, i could not use this filter as:
columns: [
{
field: "status",
title: "Client Status",
filterable: {
ui: this.statusFilter,
operators: {
string: {
eq: "Is equal to"
}
}
}
}
This method is working very fine for me. But the filterable props as object is not working on my case.
What could be the workaround for this problem?
Please help!
I updated my kendo vue ui wrapper version, It is working as expected.
"#progress/kendo-grid-vue-wrapper": "^2018.2.620",
I am building a app in angular 5. In my HTML page, I have a table which shows the data on being queried. This data is being displayed in ag-grid using directive. One of the column in grid is displayed as HTML link. I am using cellRendererFramework feature to show the values in column as link.
It is working fine and displays the link on the value for that column in table for each row. My requirement is that I want to pass additional parameter to cellRendererFramework component from the main component class. The reason I need this is because when the link is clicked the Angular app displays new components using angular routers and I need to pass multiple values to other component.
I am not sure how to pass parameters to cellRendererFramework class.
Column definitions of data grid
this.columnDefs = [
{ headerName: "Hotel ID", field: "HotelID", width: 500,
cellRendererFramework: LinkcompComponent },
{ headerName: "Account Number", field: "AccountNumber" , width: 700 },
{ headerName: "Customer Name", field: "PartyName", width: 670 }
];
HTML file of cellRendererFramework component
<a [routerLink]="['/trxDetails',params.value]">{{ params.value }}</a>
Is it possible to pass additional parameters to cellRendererFramework component?
Did you find a way to do this ? I am in exactly the same situation as you. Need to pass the "routerLink" as a parameter to this cellRendererFramework component, so that I can make it generic and use the component in multiple ag-grids / pages.
#Component({
// template: '<a routerLink="/trade-detail">{{params.value}}</a>'
template: '<a [routerLink]="inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
#Input('inRouterLink') public inRouterLink = "/trade-detail";
params: any;
EDIT
Ok, found the answer on their website itself after a little more looking.
https://www.ag-grid.com/javascript-grid-cell-rendering-components/#complementing-cell-renderer-params
So, in my case, I pass the params like so:
BlotterHomeComponent class
columnDefs = [
{
headerName: 'Status', field: 'status',
cellRendererFramework: RouterLinkRendererComponent,
cellRendererParams: {
inRouterLink: '/trade-detail'
}
},
RouterLinkRenderer Class
#Component({
template: '<a [routerLink]="params.inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params: any): boolean {
return false;
}
}
I'm trying to select a template conditionally. My idea was that I'd be able to have a container (view) with a list of components, where each component would state which template it should use.
{{#view.components}}
{{> {{template.id}} }}
{{/view.components}}
What I'd like to happen is for the partial declaration to resolve {{template.id}} from the component property called id, then resolve the partial.
i.e.
view.components[0].template.id = "fooTemplate" (<script id="fooTemplate" />)
view.components[1].template.id = "barTemplate" (<script id="barTemplate" />)
and ractive to resolve the #view.components block as
{{>fooTemplate}}
{{>barTemplate}}
This {{>template.id}}, tells me it can't resolve template.id.
This {{>{{template.id}} }} tells me it doesn't know anything about t.
Any workaround I could use?
Take a look to the docs: http://docs.ractivejs.org/latest/partials in "Injecting partials".
You could do something like this in the partials:
ractive = new Ractive({
el: myContainer,
template: myTemplate,
partials: {
content: anyBooleanExpression ? fooTemplate: barTemplate,
}
});
You can use the same conditional in the template property:
template: anyBooleanExpression ? fooTemplate: barTemplate,
And even to use more complex conditionals adding a swich block or an anonymous function.
template: function(){ /* you complex logic */ },
Like in this fiddle
You can define your template as below:
{{#view.components}}
{{#FooTemp}}
{{>fooTemplate}}
{{/FooTemp}}
{{#BarTemp}}
{{>barTemplate}}
{{/BarTemp}}
{{/view.components}}
and your model is like:
{
view: {
components: [
{
FooTemp: { ... }
},
{
BarTemp: { ... }
}
]
}
}