We Keep Coding

How to call a method of Vue js by clicking a button from inside the google map

I am using a package named vue-google-maps for developing an application.
I added a code snippet for adding few button inside the map but when I click on the button then it does not call any method of vue. How may I solve the problem
Here is my code
let search_result = document.createElement('div');
search_result.style.width = '300px';
search_result.style.margin = '10px';
search_result.style.fontSize = '16px';
search_result.style.backgroundColor = '';
search_result.style.cursor = 'pointer';
search_result.innerHTML = ' <button #click="test()" class="btn-primary" id="reset"><i class="fa fa-refresh" aria-hidden="true"></i> Reset </button>
<button #click="handleUndo()" class="btn-primary" id="undo"><i class="fa fa-undo" aria-hidden="true"></i> Undo </button>
<button #click="polygon_redo()" class="btn-primary" id="redo"><i class="fa fa-repeat" aria-hidden="true"></i> Redo </button> ';
this.$refs.gmap.$mapObject.controls[google.maps.ControlPosition.TOP_RIGHT].push(search_result);
drawingManager.setMap(this.$refs.gmap.$mapObject)
Problem: When I click on the undo, redo, reset button then it does not call any method's of vue js.
I need suggestion, how may I add button or any pop up inside the google map who can interact with vue instance properties or methods, it would be two way data binding
Thanks

In Vue, you should never add markup by createElement method (or in any other way directly from script). Generally, markup should be in your <template>. The markup you created is not reactive or accessible by Vue, because it was added outside of the component initialization scope.
Check out Vuejs docs for more detail: https://v2.vuejs.org/v2/guide/syntax.html
To solve you problem in a valid "Vue way", you need to show more content, preferably a full component.

How to get a "data-value” attribute updated in angular 2

Got a data-attribute bound to an Angular2 variable. That works fine. But a method might change the value, which is MOSTLY not reflected in the data-attribute. Any idea how to solve this? Here a simplified example:
<span (click)="addMoney(item)">
<i class="money inline icon right" attr.data-content="Click amount to donate ${{item.step}}"></i>
</span>
So, in this example, assume that addMoney() can change "item.step".
Thanks in advance for any help.

Just wrap attr.data-content in square brackets and string value in single quotes like below and remove curly brackets.
<span (click)="addMoney(item)">
<i class="money inline icon right"
[data-content]="'Click amount to donate ' + item.step"></i>
</span>

I'm trying to select an element I'm working with:

So, written code looks like this:
IWebElement Enter = webDriver.FindElement(By.LinkText("Enter"));
Im trying to get grab a Enter txt from code:
<li>
<a onclick="javascript:var p;if (document.getElementById('chckPot').checked==true){p=1;}else{p=0;};waitScreen();window.open('frmnewname.aspx?mod=0&pot='+p,'mojframe');" href="#">
<i class="fa fa-lg fa-folder-open">;</i>
Enter
</a>
</li>
So what ever I do I get the following error-message :
OpenQA.Selenium.NoSuchElementException: Unable to find element with LinkText == Enter
Code for test is written in C#, and previous version of app has a ID but new one don't have it (look in code).

Partial link text may help here (there could be extra newlines and spaces):
IWebElement Enter = webDriver.FindElement(By.PartialLinkText("Enter"));

Here is how you would approach this using xpath:
IWebElement element = webDriver.FindElement(By.XPath("//a[contains(text(), 'Enter')]"));

Uncaught SyntaxError: Unexpected token ILLEGAL onclick mvc

I know that this is question has been asked many times before but I can't find any similar case like mine.
I want to call a javascript function on an input type button control I'm doing it like so:
<input type="button" onclick="FormatApplicationMessage(#application.StatusID, '#application.IssueMessage')" class="fa fa-search fa-lg" />
but I always got this error:
Uncaught SyntaxError: Unexpected token ILLEGAL
This is the generated html :
<input type="button" onclick="FormatApplicationMessage(5, 'Please provide a copy of your CV')" class="fa fa-search fa-lg" />
I tried to do this:
<input type="button" onclick='FormatApplicationMessage(#application.StatusID, "#application.IssueMessage")' class="fa fa-search fa-lg" />
But I get the same error message
any hacks ?
EDIT
Here is FormatApplicationMessage implementation:
function FormatApplicationMessage(statusID, issueMsg) {
//declined
if (statusID == 4) {
$('#ApplicationMessageLabel').val("Message");
}
//Update Required
else if (statusID == 5) {
$('#ApplicationMessageLabel').val("Message");
}
//Approved
else if (statusID == 6) {
$('#ApplicationMessageLabel').val("Message");
}
$('#ApplicationMessage').show();
}

Here is what I think might go wrong:
FormatApplicationMessage is not defined as a function. Define this function with two parameters. And reference the script or define the function inline.
Make sure that in your view you can access #application and it contains your properties StatusID and IssueMessage
Make sure that #application is not part of your #Model or #ViewBag. If either is true use either #Model.application.XYZ or #ViewBag.application.XYZ
If all is defined, and you want to use #application inside parenthesis, use #(application.XYZ) otherwise the parser might get an error, so try:
<input type="button" onclick='FormatApplicationMessage(#(application.StatusID), "#(application.IssueMessage)")' class="fa fa-search fa-lg" />
See http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ and look for Explicit Expression
EDIT
If #Infas is a C# class and you want to use this in JavaScript you must create the script inline in your view. You cannot use Razor #-syntax in a pure .js-file.

After days of investigation finally I found the problem. The problem was very silly and quite annoying
The rendered HTML was like so:
<i class="mywarning fa fa-warning (alias) fa-lg" onclick="FormatApplicationMessage(5,"Return Message
")"></i>
as you can see this part ")"></i> is rendered on the next line because the string contains endlines which for some reasons it isn't legal to do so.
So to solve the problem I'd just replaced endlines by '< br >' (you can replace it by whatever symbol you like) when calling FormatApplicationMessage for the second parameter. Inside FormatApplicationMessage I restored those '< br >' to "\n" then displayed it in a text area.
USEFUL THREADS:
1
2
3
4

how to send through onclick="function(this)" [duplicate]

This question already has answers here:
passing $(this) from function to function
(3 answers)
Closed 7 years ago.
Okay, so I have got two problems here. First I will show you the html.
<div id="servicesAvailable">
<div>
<input type="text" name="servicesAvailable[]">
<i class="fa fa-plus-circle"></i>
<span>Add another service</span>
</div>
</div>
Okay so i want the user to be able to click the '.fa-plus-circle' class to add another div inside #servicesAvailable.
So i did this:(i know that people will say why dont you write $() instead of jQuery(), but its fine like this).
jQuery('fa-plus-circle').click(function(){
jQuery('#servicesAvailable').append(
'<div>
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">
<i class="fa fa-plus-circle"></i>
<span> Add another service</span>
</div>'
);
jQuery(this).next().hide();
jQuery(this).hide();
});
Ok so with this it should work fine. It actually works the first time i click the class. Then when i click on the fa-plus-circle class on the new appended section it just doesn't do anything. Even if i put console.log('here'); inside the jQuery click function it doesn't log.
So to start of if anyone can point out something i did wrong there then great!.
However i have tried now to change the way i do this to get it to work which leads the the title question 'how to send through onclick="function(this)"'
<div id="servicesAvailable">
<div>
<input type="text" name="servicesAvailable[]">
<i class="fa fa-plus-circle" onclick="addServices(this)"></i>
<span>Add another service</span>
</div>
</div>
function addServices(this)
{
jQuery('#servicesAvailable').append(
'<div>
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">
<i class="fa fa-plus-circle"></i>
<span> Add another service</span>
</div>'
);
this.next().hide();
this.hide();
}
now straight away in the console before i do any thing is has
Uncaught SyntaxError: Unexpected token this
function addServices(this)
Can anyone advise what i am doing wrong in either cases to get this to work please?
Ill admit i'm not 100% which the second way but i'm pretty sure the first attempt should work.

As the error is Syntax Error Uncaught SyntaxError: Unexpected token this.
Your string is not completed on the same line. For multiline strings use \ at the end of line
function addServices(el) {
jQuery('#servicesAvailable').append(
'<div>\
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
<i class="fa fa-plus-circle"></i>\
<span> Add another service</span>\
</div>'
);
jQuery(el).hide().next().hide();
}

This is your working code:
$('#servicesAvailable').on("click", ".fa-plus-circle",function () {
$('#servicesAvailable').append('<div>\
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
<i class="fa fa-plus-circle">click to add</i>\
<span> Add another service</span>\
</div>');
jQuery(this).next().hide();
jQuery(this).hide();
});
Here is the JSFiddle demo

The event was binded only to the existing element, and not with the dynamically added elements. To bind events with dynamically added elements you need to update
jQuery('fa-plus-circle').click(function(){
to
jQuery("#servicesAvailable").on("click", "fa-plus-circle", function(){
For reference - http://api.jquery.com/on/