Toggle With Vue in ASP.NET Core Application - asp.net

I'm making an ASP.Net Core web app and in it I have a checkbox toggle that has some Bootstrap 4 styling and is hooked up to Vue using v-on:change:
<input v-on:change="changeCurrency()" type="checkbox" data-toggle="toggle" data-on="SEK" data-off="EUR" data-onstyle="light" data-size="sm">
However, the v-on:change method doesn't fire if the element is decorated with:
data-toggle="toggle"
Does anyone know any other way of perhaps making a similar toggle and having it work with Vue? I looked into perhaps creating a Vue toggle, but didn't find much information on how to implement that into an ASP.NET Core application.

Related

How to use Toucheffect in Maui. In xamarin forms we can do it using the xamarin toolkit.

This is the shared touch effect files
This is the android platforms specific code
This is where I register the effect and the handler
This is where I used toucheffect nativeanimation property
Some properties are working , for example : the PressedOpacityBackgroundColor. Is there a way to make the native animation property to work
I tried from someone's code from where this issue was mentioned. I implemented as it is but the native animation property isn't working and also some other properties as well.
You can also use the Toutheffect in the MAUI.
You can add the Xamarin.CommunityToolkit.MauiCompat 2.0.2-preview1013 to your project. It is the .NET MAUI Compatible version of Xamarin.CommunityToolkit.

How to reset form with web components?

For our web-components library we are using Lit framework, but recently we have discovered the bug that whenever our custom web components are included into the form, they are getting ignored by form reset(). Do you know how to force custom web components to be included into form.reset()?
<form>
<custom-input-field
id="title"
name="title"
value="Check out our library"
></custom-input-field>
<input type="reset">
</form>
You might want to take a look at form-associated custom elements.
This'll allow custom elements to participate in forms and let you implement a formResetCallback() to reset your custom element to its default state on form reset.
As of writing (Aug 2022), form-associated custom elements via ElementInternals are available for Chrome and Firefox, and just got implemented for Safari.

Impossible make a input or AtomTextEditor with React

I'm making a plugin that gets the actual panel or text selection and runs a command on the cli with that value and some params that the user adds in a input.
The idea is to have a similar view than find-and-replace package, but from the first beginning I wasn't able to use space-pane-views for a error on jQuery.
So I decided to make it with React and as far as I was making everything was okayish, but I found 2 big problems.
First I understand what's the View of space-pan and all the ShadowDOM that uses, I feel that is not compatible with React at all, is some kind of big Model that gets data from the dom and from some methods.
So I created a <input /> and I figuret out that you can't interact as normal as a website with that input, doesn't have the hability of delete normally the text and you can't use the atom-text-editor styles into it.
in another hand I try to create a Custom Web Component with React like:
<atom-text-editor
{...this.props}
mini
tabindex='-1'
class={`${this.props.className}`}
data-grammar='text plain null-grammar'
data-encoding='utf8'
/>
and it works with inheriting the styles, but I can't access to the content of the Shadow DOM, neither add eventHandlers like onChange (onKeyPress works btw), this is basically a problem more than React that Atom, but is as far as I went in the intention to create a View in Atom.
Another option could be add draft-js from Fb, but it's a crazy idea for create a simple input.
Any idea to solve one of both problems?
Thanks!
If you add a normal input in React with className='native-key-bindings' the input contains the nativew key bindings, and you can attach the eventHandlers there.

gmap api v3 autocomplete not working in an "integrated IE7/8"

My IE8 is integrated in the VC++ application, the web application must run in this "integrated IE Browser". The autocomplete function works in a standalone IE8 and FF15 but not in that "integrated IE8". If I input something in the text field, not only the autocomplete don't work, the input text will also be cleared automatically when focus out.
if I set the value forcely like following, gmap autocomplete will work (only) for that input.
<input id="searchTextField" type="text" size="50" value="london" />
So I thought at the beginning that the value just can not be input, however the other autocomplete fields using jQuery autocomplete work just fine. I wonder what could cause this kind of problem?
I solve the problem, the IE can be configured in the VC++ Application

ValidationSummary component in Flex Framework

Is there any component that does handle validation errors similarly to ASP.NET's ValidationSummary control in flex? (See screenshot)
alt text http://i.msdn.microsoft.com/ms972961.pdc_userinput_fig2(en-us,MSDN.10).gif
Component should really only display all the errors for the validator it watches.
I'm convinced I already used it but I was unable to find it anywhere in the doc.
There is no component in Flex specifically designed to show a collection of all the validation errors in a form. Some built-in components have support for validation error indicators. TextInput, for instance, can display a red border with an error tooltip that appears on mouse roll over.
Flex Validators work a bit differently than this but check out the Validator Samples in Tour de Flex.
Well, I achieved the results I was expecting with a bit of work.
Sharing in the event that somebody has the same needs that I had ;-):
Made a component that overrides validationResultHandler and manages validation errors
Made sure that all the validators that had to be shown in the component had their listener property set to the component's instance
And thats pretty much it.
<my:ValidationView id="vv" />
<mx:StringValidator listener="{vv}" ... />
<mx:Validator listener="{vv}" ... />

Resources