In my Vue project I have the following element:
<img
class="header__branding__logo"
src="#/assets/img/logo_desktop.svg"
/>
It is self-closing. Yet, ESlint throws this warning:
Disallow self-closing on HTML void elements (<img/>) vue/html-self-closing
Doesn't make any sense to me, am I missing something? What's the problem?
Your linter is just following the coding style you have configured it to follow. Your HTML is not invalid (although the / is considered unnecessary), but you have your linter configured to disallow that / on self-closing HTML tags, so that is why it is bringing it to your attention with a warning.
Related
Vuejs and Alpine js uses similar directive #
So i resorted to usin x-bind: x-on:click instead of using the # directive when writing AlpineJs in the same project as VueJs.
This has been working fine until
There's a need to do a loop.
Going through alpineJs docs
There are two rules worth noting about x-for:
x-for MUST be declared on a element
That element MUST have only one root element
So when i do
<template x-for"(option, index) in options) x-bind:key="index">
//the rest of the code
</template>
I keep getting Alpine expression error: option is not define.
Any idea on how to resolve this?
I generate a project using vue-cli and then run vue add vue-material.
Then I add MdButton and check in the browser
// work
<md-button class="md-icon-button">button</md-button>
Then I add MdIcon and check in the browser
// not work
<md-button class="md-icon-button">
<md-icon md-src="/assets/icons/svg/telegram.svg"></md-icon>
</md-button>
The compilation succeeds, but an error appears in the browser
Uncaught (in promise) The file /assets/icons/svg/telegram.svg is not a
valid SVG.
svg is definitely valid! How to fix?
I ran into this recently; as Leonardo mentioned it was due to the newly-added MIME type check. For some reason, my SVG file was being served up with Content-Type: text/html.
To fix it, I had to change my icons to use require, which (if I understand correctly) causes it to go through a different loader in Webpack which fixes the MIME type. (See here for a bit more info.) Using OP's example, I would change:
<md-icon md-src="/assets/icons/svg/telegram.svg" />
to
<md-icon :md-src="require('/assets/icons/svg/telegram.svg')" />
It seems an issue created because a mime type.
https://github.com/vuematerial/vue-material/pull/1942/commits/74c45f2150e7fc978e536dbc03549d0e8abff47c
I am trying to download Vue Element.io locally. If I am using example from CDN all works. But if I am linking to component placed on file system I am getting error.
<script src="js/index.js"></script>
Instead of:
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
I am getting error:
Unknown custom element: <el-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I tried to link with all package and part of it (single element like button). Thу error is same.
I have a really large portion of our site written in VueJS. It was brought to my attention that it does not load in IE 11 (or Safari 9 and below). Unfortunately, IE 11, still accounts for 10% of traffic to the site.
After adding in polyfill and fixing some other errors in the developer console for IE11 the site still doesn't load. I see only a blank page. I set the compatibility mode to edge, nothing still. The console is clear of errors, only a few warnings. I am indeed running this through es2015 + babel-polyfill using gulp.
Has anyone dealt with this before? I am afraid I will have to start stripping down the application piece by piece until I isolate the code or element causing the problem. That could take days seeing as IE 11 gives me no debugging information.
The issue here was ES6 style JavaScript within the markup. Example:
<div class="tabs tab_select" data-group="tabs" data-ref="room" v-on:click="(event) => { toggleTab(event, property) }">
Needed to be:
<div class="tabs tab_select" data-group="tabs" data-ref="room" v-on:click="toggleTab(event, property)">
I found that my website was automatically running in compatibility mode as all sites on our intranet do.
What fixed the issue for me was using a meta tag setting the target to the version I needed (I needed to target a min of IE 10).
<meta http-equiv="X-UA-Compatible" content="IE=10" />
Put that on your index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
Upon invsetigating 'mu is too short's answer to this question, I noticed that I get different behaviour in jsFiddle than in my local context for the exact same script. Any clues as to why that is?
Note:
I am not getting any javascript errors in Firefox's error console in the local context.
UPDATE:
I tried grabbing the HTML from fiddle.jshell.net/ambiguous/ZEx6M/1/show/light to a local file and loading that local file in Chromium browser and I got the following errors in the javascript console:
GET file:///css/normalize.css undefined (undefined) /css/normalize.css
GET file:///css/result-light.css undefined (undefined) /css/result-light.css
Resource interpreted as Script but transferred with MIME type application/empty jquery.scrollTo-1.4.2.js:-1
Resource interpreted as Script but transferred with MIME type text/plain jquery.viewport.js:-1
I can get rid of these javascript errors by downloading the files and modifying the <script> tags, but it doesn't solve the problem. The page still scrolls down to the very bottom. Also these errors appear even in the working (jsFiddle) version.
I also tried the same process in Konqueror. Result: the script does absolutely nothing.
Don't use separate files for CSS and javascript. Just bring everything into HTML file (using inline javascript and inline CSS) and you should be OK.
Or, run a web server locally to serve the javascript file (with the correct MIME type) and use relative paths to CSS.