I am adding a BootstrapVue b-pagination component in my Vue 2 app and having issues with the aria attributes. I'm using the page-click event to check the aria-attributes of the clicked on item. On Chrome, I am able to retrieve the attribute via the event object. On Firefox, these attributes are undefined.
template
<b-pagination
v-model="currentPage"
:total-rows="total"
:per-page="15"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
v-on:page-click="pageClicked"
></b-pagination>
JS
pageClicked(e){
// these are defined properly on Chrome, but undefined in Firefox
console.log(e.target.ariaLabel, e.target.ariaPosInSet )
},
Related
I have a button on the homepage of my application:
<ion-button href="/start" class="btn" color="danger">start</ion-button>
However, I noticed it actually reloads the page when clicked.
I also have ionic tabs (https://ionicframework.com/docs/api/tabs), and when a tab is clicked a component is loaded instantly.
How can I achieve the same functionality for ion-button?
The tab component has an integration with the router, which allows the tab to function as a vue-router link. ion-button doesn't seem to have the same integration. The documentation for the href prop states:
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Using href makes the button function as a regular browser link which will cause the page to reload. Instead, you can wrap the ion-button in a router-link tag or call $router.push in the button's click event.
I want to use the library like Vimeo Player SDK with Nuxt.js.
<template>
<iframe
id="video01"
ref="video01"
src="https://player.vimeo.com/video/{videoID}">
</iframe>
</template>
<script>
import Player from '#vimeo/player'
export default {
created () {
const iframe = this.$refs.video01
const player = new Player(iframe)
}
}
</script>
But I cannot get DOM.
In case of SPA, I couldn't get DOM.
So error log is here.
TypeError: You must pass either a valid element or a valid id.
In case of SSR, window cannot use.
So error log is here.
window is not defined
Can't I use Vimeo Player SDK with Nuxt.js?
Did you try the vue-vimeo-player package? It could be helpful to have something managed the Vue way.
For the SPA, you will need to wait for the element to be on the page; hence try your code in a mounted hook (created step is before anything get mounted to the DOM).
If you want SSR too, you could try to wrap the whole thing into a
<client-only>
<! --- note I used vue-vimeo-player and not the vimeo-player --->
<vue-vimeo-player ref="player" :video-id="yourVideoID"/>
</client-only>
Here is a repo that I've created to show you how simple it is to make it work: https://github.com/kissu/so-nuxt-vimeo/blob/master/pages/index.vue
It made me find that you should use the <vue-vimeo-player /> component and not <vimeo-player />.
However, I imported the Vue wrapper for Vimeo Embed Player in the demo locally in a Vue component.
I have a Vue.js app that loads content in the created() method. I use a v-if tag to hide all of my UI until that content is loaded and ready to go. It works fine on the initial load, but if a user were to hit refresh in Chrome then the app displays (flashes momentarily) content that would not otherwise be displayed (based on the data being loaded in created).
From what I understand using the v-if tag, with a flag from my vuex store that indicates when the load has completed, is the proper way to hide content until I am ready to display it.
How can I avoid having the content flash on the refresh?
Vue.JS has solved this using the v-cloak directive. (see docs)
You add the v-cloak directive to your application's root element:
<div id="app" v-cloak>
...
</div>
Then add this CSS rule to your application's stylesheet:
[v-cloak] {
display: none;
}
Everything within the app div will then be hidden until Vue has initialized.
Recently $nexttick appears to have broken on IE 11, in particular regarding input bound variable. This is causing forms with dynamic content to submit missing the required data
<form id="something" action="/" method="post">
<input type="hidden" name="token" :value="token" />
</form>
// js code
promise.then(function() {
self.$nextTick(function () {
document.getElementById('something').submit();
});
});
We have found that using the setTimeout for 1 second around the form submission allows enough time for the DOM to be updated so the token can be included in the form submission.
Has there been any changes to nexttick / IE11 that we need to account for?
nextTick allows you to do something after you have changed the data and VueJS has updated the DOM based on your data change, but before the browser has rendered those changed on the page. If you want to explicitly re-render the DOM, use requestAnimationFrame or setTimeout.
You could check this thread.
I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example