Can I set a current-page props on PrimeVue Paginator?
https://primefaces.org/primevue/paginator
I want to detect a query string to set current page
seems there is no props I can set?
I tried :value, :current, :current-page
no one is working, always on page 1.
You can use first to retrieve and or modify the current position. If you have one row per page :row="1", first equals page - 1.
<Paginator
v-model:first="first"
:rows="1"
:total-records="10"
/>
<Button #click="first = 0">Go to page 1</Button>
<Button #click="first = 2">Go to page 3</Button>
If you are displaying more than one row per page, e.g. :row="10" you have to some math ;-) Basically: first = (page - 1) * rows
<Paginator
v-model:first="first"
:rows="10"
:total-records="100"
/>
<Button #click="first = 0">Go to page 1</Button>
<Button #click="first = 20">Go to page 3</Button>
Just realized that you need to actually tell the Paginator how much you want to skip, not the math to calculate the current page.
<Paginator
:rows="movieStore.movieLimitCount"
#page="onPaginate"
:totalRecords="movieStore.movieCount"
class="mt-5"
:alwaysShow="false"
v-model:first="offset"
/>
<script setup>
const offset = ref(0);
const onPaginate = (e) => offset.value = e.rows * e.page;
</script>
Related
I am trying to make a quiz game and after getting the answers to shuffle around, they sometimes are surrounded by "\" \"" marks. When just displaying the correct answer, it will not have these marks. I have tried using v-html which normally gets rid of this issue, however then all the answers are [Object object]. I have tried trying to retrieve just part of the arrays and objects with [0] [2] and so one but that didn't work either.
Here is my html:
Style binded so that if that button is selected, the background colour of the button will change. Colour is a variable changed when answer is checked -->
<button class="answer" :disabled="answered" #click="checkAnswer(shuffled[0])" :style="selected == shuffled[0].value && {backgroundColor: colour}">{{shuffled[0]}}</button>
<button class="answer" :disabled="answered" #click="checkAnswer(shuffled[1])" :style="selected == shuffled[1].value && {backgroundColor: colour}">{{shuffled[1]}}</button>
<button class="answer" :disabled="answered" #click="checkAnswer(shuffled[2])" :style="selected == shuffled[2].value && {backgroundColor: colour}">{{shuffled[2]}}</button>
<button class="answer" :disabled="answered" #click="checkAnswer(shuffled[3])" :style="selected == shuffled[3].value && {backgroundColor: colour}">{{shuffled[3]}}</button>
<!-- Button running function to end game with parameters of current correctCount and totalQuestions -->
<button type="button" #click="finish(correctCount, totalQuestions)" class="btn button done">Finish</button> <div class="correct"><p v-if="answered"><strong>Correct Answer:</strong> {{correctAnswer}}</p></div><button type="button" :disabled="!nextAvailable" #click="getQ(selectedDifficulty)" #click="shuffle(options)" class="btn button next">Next</button>
<!-- Button which is disabled when a question loads and runs functions to shuffle the answers and get a new question -->
</div>
<h3>Debugging</h3>
<p><strong>Correct Answer: </strong>{{correctAnswer}}</p>
</div>
And here is my relevant JS:
let getQ = async function() {
let response = await fetchURL('https://the-trivia-api.com/api/questions?categories=film_and_tv&limit=1®ion=AU'); // api source link
this.correctAnswer = response[0].correctAnswer;
this.incorrectAnswerOne = response[0].incorrectAnswers[0];
this.incorrectAnswerTwo = response[0].incorrectAnswers[1];
this.incorrectAnswerThree = response[0].incorrectAnswers[2];
this.question = response[0].question;
this.shuffle(options); // shuffles the answers in options variable
this.answered = false; // resets the disabled buttons
this.nextAvailable = false; // disables 'next' button
this.totalQuestions++; // increases number of total questions
}
// function to shuffle the answers
let shuffle = function(array) {
this.selected = null; // resets selected variable
let num = array.length, t, raInt;
// while there are remaining elements to shuffle
while (num) {
// choose random
raInt = Math.floor(Math.random() * num--);
// swap with current element
t = array[num]
array[num] = array[raInt];
array[raInt] = t;
}
this.shuffled = array.value; // saves to shuffled variable
}
All variables are declared and returned in the component. What I want is for it to always have every answer shuffled and without these markings.
There are some error messages but I am not quite sure what they mean:
If I haven't provided enough information or code, please feel free to say if you need more.
I have issue for adding specific facebook pixel for SPA Aplication in vue
<script>
!(function(f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function() {
n.callMethod
? n.callMethod.apply(n, arguments)
: n.queue.push(arguments);
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s);
})(
window,
document,
'script',
'https://connect.facebook.net/en_US/fbevents.js'
);
fbq('init', 'test');
fbq('track', 'PageView');
fbq('track', 'CompleteRegistration');
</script>
<noscript>
<img
height="1"
width="1"
src="https://www.facebook.com/tr?id=1234456789&ev=PageView
&noscript=1"
/>
</noscript>
<!-- End Facebook Pixel Code -->
i want to add this to my page domainname/register
how to add script head and no script head for specific page in Single Page Application VUE
Step 1: Add facebook pixel code in your public/index.html inside <head> tag
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '266xxxxxxxx1');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=266xxxxxxxx1&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Step 2: Inside your component computed, methods, created you can do,
Inside methods you can do,
methods: {
addtoCart() {
window.fbq('track', 'Add to your shopping cart')
}
}
Inside computed you can do like
computed: {
formattedRating () {
window.fbq('track', 'Format your rating')
return this.fixedPoints === null
? this.currentRating
: this.currentRating.toFixed(this.fixedPoints)
},
}
Inside created you can do like,
created() {
this.loadPressRelease()
window.fbq('track', 'Load press release')
},
You can call the facebook pixel event faq function using window.faq in any components
You can render this script based on the current route name.
First this has to be inside the mounted Vue app (Within <router-view/>) ex: inside a layout component if you have it.
Important, adding the script directly inside the Vue app could cause problems.
Therefore, better to move your script to a js file in your assets folder ex:
/js/fbq.js.
After that check the current route to render it like this:
<!-- Render based on route -->
<component v-if="$route.name == 'register'" :is="`script`" src="/js/fbq.js" async></component>
I have used the b-table component with the :per-page attribute set to 10.The issue here is when i add the 11th row to the table, the row gets added but the current page is still the first page.
<b-button #click="addTableRow('compensationData', 'compensationData','compensationAmt')" class="is-radiusless">Add Effective Date</b-button>
<b-table
ref="compensationData"
:data="this.objectData.compensationData"
:hoverable="true"
:paginated="true"
:per-page="10"
selectable
#select="selected"
detailed
icon-pack="mdi"
width="60%"
>
How to automatically move to the next page when the number of pages added are more than 10 in the current page? Please help?
There is no automatic way to change page when a new row is added.
But you can check for the number of rows and set current page accordingly.
// template
b-table(
:current-page.sync="currentPage"
:per-page="perPage"
)
// script
data() {
currentPage: 1,
perPage: 10
},
methods: {
whenNewRowIsAdded() {
this.currentPage = Math.ceil(this.objectData.compensationData.length / this.perPage)
}
}
i'm new on all of these so i need help. first of all how vue-glide-js events work to begin with. its documentation just listed them without examples.
And second and more important, i wanna send an axios request at the end of my carousel and load more items. i couldn't work with events so used active slide and watched it and on last slide sent and updated my data but slide still shows the previous one. what should i do?
it is the simplified version of my code
<template>
<div>
<vue-glide v-bind="carouselOptions" v-model="active">
<vue-glide-slide v-for="i in array" :key="i">
Slide {{ i }}
</vue-glide-slide>
</vue-glide>
<p>{{active}}</p>
</div>
</template>
<script>
export default {
data(){
return{
carouselOptions:{
direction: process.env.SITE_DIRECTION,
autoplay: false,
perView: this.$device.isMobileOrTablet ? 4 : 8,
peek: { before: 0, after: 50 }
},
array: [1,2,3,4,5,6,7],
active: 0
}
},
watch:{
active(){
console.log('active = ' + this.active)
if(this.active > this.array.length - 3){
this.array= [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
}
}
},
mounted(){
//
}
}
</script>
as you can see i manually added more items to my array but glide still show 7 items. i know it has something to do with mounting but dont know what to do.
and one more thing. if there is any better carousel that support rtl and breakpoint (items per view on different width) i would be happy to know. tanx
To use call a method at the end of slides just using #glide:run-end:
<template>
<div>
<vue-glide v-bind="carouselOptions" v-model="active" #glide:run-end="myMethod">
<vue-glide-slide v-for="i in array" :key="i">
Slide {{ i }}
</vue-glide-slide>
</vue-glide>
</div>
</template>
to show the new slides, it's a bit tricky! as far as i know the only way is to refresh (reload) the component! so put a key on vue-glide and change it after each new added slides. the only problem is, if there is images on slides, old ones also will be load again. (it's a suggestion and didn't tried my self yet, but maybe with a caching system, it may be solved)
Hello I have a simple page of our application, the start page that has a disclaimer on it and one button. Because of the technology we are using the IDs are stripped out and obfuscated.
So the button's name is 'ok' as it appears in the page-source view below. Note no ID. Even if I put it in our code, when it is produced the ID is removed.
<div style="text-align:center;">
<input type="button" name="ok" value="Ok" width="40" onclick="swap()" />
</div>
I have the following in my TestCafe js file:
import {Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `My fixture`
.page `http://192.168.2.86/mpes/login.jsp`;
test('Disclaimer Page 1', async t => {
const okBtn = Selector('button').withAttribute('ok');
await t
.click(okBtn);
});
test('Disclaimer Page 2 -- of course tried this ', async t => {
await t
.click('ok');
});
.click('ok') -- does not work either
Tried numerous things even trying findElementByName .. but nothing works with Window vs Document and Selector vs element.
Any help would be greatly appreciated.
I have been all over looking at how to grab selectors on TestCafe docs. None seem to fit this scenario which is quite simple -- but highly problematic.
Thanks in advance.
If you want to select this element:
<input type="button" name="ok" value="Ok" width="40" onclick="swap()" />
you can use (one or more) attribute selectors like this:
input[type="button"][name="ok"]
If only one element on the page has the attribute name="ok", you can grab that single element in javascript, using document.querySelector(), like this:
const myButton = document.querySelector('input[type="button"][name="ok"]');
N.B. If multiple elements on the page have the attribute name="ok", you can grab all of them in javascript, using document.querySelectorALL().