I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like
<template>
<button #click="() => {some code... }">Click me</button>
</template>
Arrow functions works fine inside script tag, but problem with template tag drives me mad.
Functions are not allowed in the template syntax so if the plugin allows it or not doesn't matter anyways + its not good practice --> create a method for it much cleaner and more readable.
Git hub issue for similar problem.
https://github.com/vuejs/vue-loader/issues/364
I'd say it's supported already in vuejs 2.0. I have tested it and it's also written in the docs:
<comp :foo="bar" #update:foo="val => bar = val"></comp>
Just PhpStorm is complaining... If you raise a bug I will upvote!
Related
I'm looking to start creating a new website and I came across blazor/razor for asp.net. I'll say just looking at it, this has me very excited to get away from all of the javascript frameworks. However, like many others, I'm having issues getting a simple #onclick to work, and the more research I do into blazor/razor, the more I get confused. As others have noted, everything seems to keep changing, so the resources I find keep contradicting themselves.
To start, I'm trying to create a simple Razor component (.razor extension) in an ASP.NET Core Web App. I watched the "Introducing Razor Components in ASP.NET Core 3.0 - Daniel Roth" video on youtube as a starting guide, and came up with this:
<div class="">
<input type="text" placeholder="Search..." #bind="#searchValue">
<button #onclick="Search">Search</button>
</div>
#count
#code {
string searchValue;
int count;
void Search()
{
var x = searchValue;
count++;
}
}
My problem is, the button #onclick isn't calling the Search method. I've seen several different variations on this syntax and I've tried them all. The video I mentioned had it as
<button onclick="#Search">Search</btton>
but I've found that the # symbol is now required in front of onclick. I've seen the # symbol included and not included in front of the method name. If I don't include it, it compiles and runs, but the button doesn't do anything. If I do include it, I get the error message:
Cannot convert method group 'Search' to non-delegate type 'object'. Did you intend to invoke the method?
I found this BlazorFiddle (https://blazorfiddle.com/s/aoa87v05) as a quick testing ground and found that adding both:
<button #onclick="#SomeAction">Click Me</button>
<button #onclick="SomeAction">Click Me</button>
worked fine. So I'm not sure what I'm doing wrong here. (Perhaps this blazor fiddle is on an older version?)
Any help would be greatly appreciated.
For reference, here is the .cshtml page calling this:
#page
#using WebPortal.ComponentLibrary.Common
#model WebPortal.Pages.Reporting.ReportingModel
#{
ViewData["Title"] = "Reports";
}
<div class="text-center">
<h1 class="display-4">Welcome to the Web Portal</h1>
<component type="typeof(SearchBar)" render-mode="static" />
</div>
I've tried each of the options for the render-mode with no luck.
I've also already added "services.AddServerSideBlazor()" and "endpoints.MapBlazorHub();" to the Startup.cs page.
PS: As a side note question, not a big deal, I saw some references to components being called with the syntax
<SearchBar />
, but that's not working for me. Has that been removed? I like that syntax better as it seems cleaner.
You seem to be mixing up Razor and Service Side Pages with Blazor. What do you want to develop? If it's Blazor, watch an up to date Blazor video and start with deploying the standard Blazor Template. Your code works in a BLAZOR page.
With this simple anchor link & anchor target - originally defined by Tim Berners-Lee as a HTML Fragment Identifier - is there a way to stop a false JavaScript error from appearing in Aurelia?
HTML:
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
JavaScript Router Error #1 (Not a real error):
Error: Route not found: /in-page-link
That's a false positive error. Of course it's not found! It's an in page link! It isn't a route! That JS "error" isn't a real error.
Is there a way to suppress that error, without having to over-engineer a JavaScript solution - to measure scroll heights & adjust the page offset - simply get around the flawed Node.js design paradigm, where routers break a basic HTML feature to create regex paths AKA: routes? Why do I need to invent a JS fix for something a framework broke? If you break it, you fix it, right?
I've tried using Aurelia's router-ignore idea, but it doesn't work for links which start with hash tags. This similar SO answer doesn't work (& the 2nd line of the OP question was incorrect): How do I keep on the same page by clicking on internal anchor links, using Aurelia?
Is there a router configuration BYPASS feature, which won't try to re-route the URL to another location?
I've tried using nav: false in the router configuration, but it wants a moduleId. There isn't a moduleId for an in page link target.
With a basic router configuration JSON block like this...
{
name: 'no_redirect',
route: ['in-page-link'],
nav: false
}
... how do I stop either the first JavaScript error (up above) or this additional JavaScript error from appearing, considering in page links won't have nor need to use these: moduleId, redirect, navigation nor viewPort? It's just an in page link.
JavaScript Router Error #2:
Uncaught (in promise) Error: Invalid Route Config for "in-page-link": You must specify a "moduleId:", "redirect:", "navigationStrategy:", or "viewPorts:".
I'm trying to make this HTML link work, without having Aurelia throw false JavaScript errors into the console.log. Is there an easy way to do that?
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
I figured out a solution for my problem!
I tried getting it to work with anchor links & router-ignore, but neither of those worked out for the site that I'm building. Perhaps it's using an older version of Aurelia, which doesn't have that router-ignore feature yet? Maybe. I don't know. I didn't check.
There is an open bug for my 1st JavaScript error on GitHub. It also has an interesting router configuration in it, which would address my 2nd JavaScript error.
I've discovered a faster & simpler work-around, which other Aurelia developers might like!
I reached out to Rob Eisenberg, who was kind enough to point me to his discord.aurelia.io site. While searching it, I found an interesting work-around idea! After exploring it & the related code examples, I was able to get the 1st false JavaScript error to disappear... without having to over-engineer any browser pixel measuring logic! I really didn't want to have to write any JS scrollbar math again, using clientOffset values. Here is a good example of measuring the scrollbar height.
I have repeatedly written code like that in the past, but I wanted to avoid having to reinvent that wheel... yet again! I really wanted to figure out another way to fix this basic snag, without having to write any custom scrollbar math logic because it felt like I was writing too much code to fix a bug in the underlying framework. Other frameworks, besides Aurelia also suffer from hijacking the '#' in the URL to create routes. It appears to be a recurring issue in the Node.js community.
This fast work-around for Aurelia is super small, fast & easy to implement. Perhaps someone will enjoy this!
Change <a href="#in-page-link"> to <div class="link" click.trigger="jumpDown()">.
Add a method into the behind-the-scenes matching JavaScript file, which sets a boolean:
jumpDown () {
this.linkClicked = true;
}
Change <a name="in-page-link"> to <button class="btn" focus.bind="linkClicked">.
Use CSS to style the link, plus add a cursor: pointer; property & hide any button styles, as desired.
So the final code would look like this:
HTML:
<div class="link" click.trigger="jumpDown()">In Page Link</div>
...
<button class="btn" focus.bind="linkClicked">The link scrolls/jumps here</button>
JavaScript:
jumpDown () {
this.linkClicked = true;
}
CSS:
.btn {
/* Style as desired. */
}
.link {
color: #0000FF;
cursor: pointer;
text-decoration: underline;
}
Then the original JavaScript error #1 vanishes! The link click still works! No additional router configuration is needed! Web developers look like web rockstars! The quality assurance team is happy! Problem solved!
For some reason, content is not being displayed on the website if viewed from the microsoft edge browser. The background is loaded, which is loaded through HTML, but the parts loaded with Vue do not get displayed and i dont understand why.
I have no idea where to start to debug this.
<div class="nk-main">
<router-view :key="$route.fullPath"></router-view>
</div>
In the console, i get these errors on Microsoft Edge:
https://imgur.com/a/y7V3NG7
$store is the VueX variable. And the this error I dont understand.
Does anyone have any idea how I can fix this or how I can further debug the issue?
I think #birdspider answered your question. In your Vue.js templates you referencing to Vuex store like this this.$store.state.blabla instead of $store.state.blabla. This happen because this keyword in template is undefined. When you access your variables in template you have to dont use like {{this.variable}}, just {{variable}}, declared in data() setction.
I was just working on a project that was sending an extra request and it was because of data-remote="true". I've seen this line plenty of times before, but I guess I don't really know what it does. I tried Googling it but all that comes up are specific examples where data-remote isn't working for the question asker.
I just want to know what the purpose of data-remote="true"/"false" is to get a better understanding of it.
data-remote = "true" is used by the Ruby On Rails framework to submit the form/link/button as an ajax request. If you are interested here is the guide discussing how Ruby on Rails works with javascript: http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html
It is definitely not a standard thing.
Usually data-*** is a custom attribute used on application level. So check in sources of your scripts - it is used by some code.
I was told that data-remote="true" is an HTML version of JavaScript's preventDefault() method, in that it simply prevents the form from being submitted to the server.
Rails applications along with the jQuery gem generates the global listener:
$(document).on("click", "a[data-remote=true]", function(e){
e.preventDefault();
$.getScript($(this).href())
});
Feel free to correct me if I'm wrong :)
I see examples that show directives rendering an HTML file in lieu of the directive. Or controllers rendering an HTML snippet as a scope variable, written directly between single quotation marks - like
$scope.items = '<ol><li>an item></li> <li>another item</li></ol>'
(this does not work well for me because I have other single quotation marks in the middle of my HTML snippet that seem to stop the HTML snippet from rendering properly.)
Here is something I tried that did not work:
Controller code:
innerapp.controller('ResourcesController', function($scope, $sce, $http) {
$scope.template = 'employeelists.html';
});
HTML code:
<div ng-controller="ResourcesController">
<div ng-bind-html-unsafe="template"></div>
</div>
I have 'employeelists.html' in my app/assets/templates folder. I am using AngularJS with Rails, and this setup already lets me call the file like this:
div ng-include="'employeelists.html'"></div>
But I want the controller, instead of ng-include, to render the HTML file.
Basically, I am working on functionality such that if I select an item on the HTML page (under this AngularJS controller), a function in the controller gets called that updates the scope variable (that's linked to a template file) with another template file.
First, please keep in mind DOM manipulation should allways be left to directives, not controllers. Second, I would highly recommend you looked into views using ui-router. This could easily accomplish what you want to do. Here is an example of simple view changing:
https://angular-ui.github.io/ui-router/sample/#/
Also, someone already found a way to input code to the ng-include directive so you could update it:
angular - update directive template on click
However, do read the answer above how he also recommends you use $stateProvider (ui-routers state configurator) since it would be a much easier approach to what you are trying to do.
I hope this helps