I have a basic html form with Angular JS.
<div class="form-control" id="alarm">
<select ng-model="vm.clock.alarm" ng-options="option.title for option in vm.alarms track by option.url"/>
</div>
This runs fine in a chrome browser window. However, when I run this inside of an electron app, the select box renders and functions fine, but no html is rendered after it. There are no javascript errors. When I inspect the html, there is no html after the select element in the dom. Why is electron not rendering the html just like a chrome browser?
I am using the latest version of electron, chrome, and 1.4.8 of angular.
The issues was with the select option and not having a closing </select> tag. Must be a bug in electron or electron's chromium version.
<div class="form-control" id="alarm">
<select ng-model="vm.clock.alarm" ng-options="option.title for option in vm.alarms track by option.url">
</select>
</div>
works
Related
I'm working on a Vue.js project where users can download any files. Everything works fine, but for some reason, chrome doesn't download jar/zip files. There are any errors in chrome console. Moreover, it works on my local machine and doesn't work on production server. Here is vue.js code:
<a
:href="file.path"
target="_blank"
class="icon-link block q-pr-xs"
>
<q-icon name="get_app" size="sm"></q-icon>
</a>
and generated html
<a data-v-52d0018a=""
href="http://myserver.com:9000/portal-fileuploader/static/file.rar"
target="_blank"
class="icon-link block q-pr-xs">
<i data-v-52d0018a=""
aria-hidden="true"
role="presentation"
class="material-icons q-icon notranslate">
get_app
</i>
</a>
I don't even know the direction of research, so will be grateful for any ideas.
Starting from Chrome 83 version, browser blocks downloading insecure files on HTTPS.
link: https://www.chromestatus.com/feature/5691978677223424
I am working on some static pages using Nuxt.js (MPA). Whenever I run the generate command, all URLs start from page, i.e /customer/. For example, my structure is:
pages
|customer
|new
- index.vue
- index.vue
And in index.vue I have linked to customer/new page as:
<nuxt-link to="customer/new"> <b-button class="btn-sm btn-success" >nuevo</b-button></nuxt-link>
all works fine if I use:
npm run dev
But if I use:
npm run generate
the link in the button link change to /customer/customer/new instead of /customer/new.
Thank you.
Your link have to be relative to the base URL of your app, see https://nuxtjs.org/api/configuration-router#base
So to fix your issue, declare your link with a starting slash as follows:
<nuxt-link to="/customer/new"> <b-button class="btn-sm btn-success" >nuevo</b-button></nuxt-link>
I'm currently new to Vue.js and front end developper.
I'm following Vue.js introduction.
Here's my index. html.
There's no code to show about app.js given I erase everything.
<html>
<body>
Hello World !
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</html>
However when I use a http-server to display my page there's one error.
And then it's ONLY when I refresh the page that I note that the error is:
[Vue warn]: Cannot find element: #app-5
Does anyone can explain me why it cannot find app5 ? index.html doesn't have any
<div id="#app-5">
and my app.js is empty so how is it possible that the browser is still looking for app-5 ?
Thanks
If JavaScript doesn't update after a refresh, in addition to a force refresh mentioned by Patrick Steele, you can disable the cache when the developer tools window is opened.
In Chrome:
In Firefox
I'm using vue as CDN because app is really simple.
at this point when I add the code
<div id="app">
<!-- some code here -->
<form action="/charge" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= stripePublishableKey %>"
data-amount="2500"
data-name="ec-system payment"
data-description="You will pay this money for something!"
data-locale="auto">
</script>
</form>
</div>
This code gives me the error something like below.
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as
, as they will not be parsed
I found some npm library like "vue-stripe" but I don't know how I can use this library when I use vue with cdn not the vue-cli.
In vue, you can not use script tag inside of template.
In your case you could use this library called "vue-stripe-checkout".
This library supports in two ways
NPM or Yarn
npm install vue-stripe-checkout --save
yarn add vue-stripe-checkout
CDN
https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js
You can use second method by including cdn into your app.
Please refer this vue-stripe-checkout for detailed information.
Vue Devtools works on all demos/examples online but not on my local pages. Even with the following, the Vue Devtools icon remains gray ("Vue.js not detected"). Why?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.config.devtools = true;
</script>
</body>
</html>
The Vue source you are using there looks to be minimized / production build to me. You need to use the non minimized / non-production build. Try https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js instead.
Also if you are working with local files i.e. accessing a page like file://... then "you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel." see https://github.com/vuejs/vue-devtools
You must add at-least 1 instance of vue, for the devtools to detect it. So, do:
new Vue({el: '#app'})
You can try to refresh the browser first.
If didn't work, make sure that if you're compiling CSS and JavaScript to have have development compilation for both not a compilation for production with minified files
If at least one file is minified for prod, devtools will not show up