Adding to vue.js value just adds number to the end

Question

Strange issue, I am trying to create a pagination system and I am trying to increase the next page value by 1. However as you can see the value is appended instead of increasing the value.

this.page = 1

<a v-if="this.total_pages > this.page" class="link" :href="'/cryptocurrency/market-cap?p='+(this.page + 1)">></a>

The above returns p=11 vue seems to append the 1 to the original page value of 1 instead of increasing the page value to 2.

If however I do the following it seems to work and decreases the p value by 1.

<a v-if="this.total_pages > 1 & this.page > 1" class="link" :href="'/cryptocurrency/market-cap?p='+(this.page - 1)" ><</a>

Is this.page a string or a number? If it is a string, you will need to convert it to a number first, i.e. (+this.page + 1) — Terry
– Terry, Commented Aug 3, 2021 at 12:48

Aer0 · Accepted Answer · 2021-08-03 12:49:25Z

2

That's not a Vue issue. It's more likely you're running into JS' loose type casting. I assume this.page is not a number but a string value. Therefore you're adding '1' + 1 in the first example which leads to 11 (since JS treats both as string and concatenates them).

However, if you're trying tu do something like '1' - 1 JS casts the initial 1 as a number instead and resolve the calculation properly.

So to solve your problem you just have to use a proper type for this.page or cast it to a number on execution, like this:

<a :href="'/cryptocurrency/market-cap?p='+(parseInt(this.page)+ 1)">></a>

answered Aug 3, 2021 at 12:49

Aer0

3,91720 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ORStudios Over a year ago

Thanks yes this was the problem, I ended up adding the following and it has done the trick this.page = parseInt(urlParams.get('p'));

Collectives™ on Stack Overflow

Adding to vue.js value just adds number to the end

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related