How to call a custom native JS function within a Vuejs 2 onclick event handler ? - vue.js

I am trying to call custom JS functions within onclick event with Vuejs 2 and I get the below error. I omitted the curly braces for the prop used as per the migration guide.
invalid expression: v-on:click.native="javascript:leo('resultList.matchHeaderEntityApi.eventIdPre','1');
Any ideas ?
Thanks.

I think you should try to move your native function call to VueJS event handler (in methods). In other words, just wrap.

I usually rethink about putting native code in or Out of VueJs, sometimes using onclick is easier than on:click, if need call such these native functions in VueJs can call them by:
window.funcName()

Related

How can i re-render all my components on a click function in vuejs

is it possible to re-render all my vue components on a click function
i have read aboutvm.$forceUpdate() but it dose not effect all child components.
is there any other way?
thank you all
You probably not doing things in vue way if you need that kind of functionality, but quick hack which might help you to achieve what you want is to refresh whole page via javascript. So inside click function insert this:
location.reload()
the problem was my function was not working because i wrote it in mounted, and i had to reload or re-render my page to make that function work
after i change my function to updated the problem was solved
vue.js Lifecycle Hooks

VueJS: Error in mounted Third party component

I'm trying to integrate third-party component Adaptive card in my application using VueJs but getting following error when wrapping it inside a separate component so that I can re-use it in other places.
Error in mounted hook: "TypeError: this._card.onExecuteAction is not a
function"
I've created a Demo to show the work done so far, can anyone suggest what I'm missing here.
I just need to integrate this adaptive card in my project as a reusable component
In fact, you are trying to call onExecuteAction function, instead of assigning it. It can be fixed, like this: this._card.onExecuteAction = action => this.$emit("action", action);
ps. i suggest you need also use :card="card" in your component template definition in TodoLis.vue and then add something like #action="handleAction" to it, to handle events emitted by your component.

Vue2 + JQuery library - preventing infinite loop, private property in the component needed

I'm making a component wrapper for jQuery library in Vue2.
In the component I have an input field set as v-model and main vue instance can update it and read it.
Vue2 Component can update it as well.
If Vue2 updated the field, I need to call init function in the library. If change has happened in library, then library sending callback where I'm updating the Vue2 model.
As a result, I have got an infinite loop where Vue2 receiving callback, updating model and receiving another callback...
Callback from the jQuery library is coming asynchronously, and I cannot set a flag for the time of update in Vue2.
I thought I can make a flag saying - something is pushed from Vue2, ignore the jQuery library callback this time. But, I don't know how to make a private property in the Vue2 component.
You can't have "private" variables without a function involved. Functions are the only way to introduce a new scope in javascript.

navigating to component twice giving error for setstate

I have a small application in react-native with two components.
on Navigating to a component twice this gives me error for setState function.
Anybody have idea about this .
I am using native base as an starter kit for my project.
the only change I did is I have seperated the UI render part in different js file.
Thanks in advance.
this has something to do with your render function.
the setstate function gives error when there is no such state variable available.
may be on navigating again to that same screen it is giving you a new state for that page instead of the previous state.
Please check your render function.

How to call a CSJS function that uses JQuery after Dojo parser has completed?

I need to call a CSJS function which uses JQuery. The tricky part is I need to call it after the Dojo parser has completed.
The CSJS function is calling $('#pageContainer input[type!="hidden"], #pageContainer select, #pageContainer textarea').serialize();
I need to call serialize() after the Dojo parser has completed otherwise I won't have the Dojo date fields in the serialized string.
I've tried putting the call in a script block at the bottom of the page like this: $(function() { serializeForm() }); but this is running before the Dojo parser has completed because my date picker field is missing.
I've also tried doing dojo.ready(serializeForm()) but that gave me an error:
TypeError: context is not a function
info: context is not a function
The error is coming from dojo.js line 1862
FYI: The purpose of serializing is to do a "is form dirty" check when the user tries to navigate away from the page (I had no luck with the enabledModifiedFlag I think because my app is using the dynamic content control to switch pages).
ready is expecting a call back function, remove the parenthesis, or wrap in anonymous function
dojo.ready(serializeForm)
or
dojo.ready(function(){serializeForm()})