When working with Vue JS, consider utilizing a data or computed property that is dependent on the value of a particular prop. In this case, the prop being altered is named "

While using pagination, I encountered an issue where the nextPage method works fine but the previousPage method throws an error.

The error message warns against directly mutating a prop as it gets overwritten whenever the parent component re-renders. It suggests using a data or computed property based on the prop's value instead. In this case, the prop being mutated is "page".

The problem seems to be related to the previousPage method where the attempt to directly modify the page results in an error. How can this issue be resolved?

<div>
  <span
    @click="previousPage"
  >
  </span>
  <span
    @click="nextPage"
  >
  </span>
</div>

<script>
export default {
  props: [
    "results",
    "is_loading",
    "search",
    "page",
    "previous",
    "next",
    "pages_results"
  ],

  methods: {
    nextPage: function() {
      if (this.pages_results[this.page + 1]) {
        this.pages_results[this.page + 1].array;
        this.pages_results[this.page + 1].next;
        this.pages_results[this.page + 1].previous;
        this.page++;
      } else {
        this.next && this.search(this.page + 1);
      }
    },
    previousPage: function() {
      if (this.pages_results[this.page - 1]) {
        this.pages_results[this.page - 1].array;
        this.pages_results[this.page - 1].next;
        this.pages_results[this.page - 1].previous;
        this.page--;
      } else {
        this.previous && this.search(this.page - 1);
      }
    },
    load() {
      this.search(this.page + 3);
    }
  },
  data() {
    return {};
  }
};
</script>

Answer №1

One method you can utilize is by saving the property in a data field.

In this instance, your data object will appear as follows:

data() {
    return {
       currentPage: this.page
    };
}

Subsequently, within the function where it is needed, increment this.currentPage++

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js and MongoDB integration for implementing like and dislike buttons

I have been struggling to create a system for liking and disliking posts in my project. The issue I am facing is with the communication between the server and client side. Here is the form I am using: https://i.sstatic.net/IBRAL.png When I click on the li ...

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

The combination of Next.JS and React Objects is not acceptable as a React child

Summary: Encountering the error Error: Objects are not valid as a React child (found: [object Promise]) while making a fetch request in a Typescript project. Interestingly, the same code snippet works without errors in a Javascript project. Recently, I ...

Understanding the reasons behind 'undefined' res.body in Express

Why does the response body show as undefined in Express? How can I access the response body properly? Is something going wrong here? import {createProxyMiddleware} from 'http-proxy-middleware' import bodyParser from 'body-parser' impor ...

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

Having trouble checking the value of an object named ReportControl. If the column type is 1, display the label "active"; otherwise, display the label "not active" on reportcomponent.html. The data for the ReportControl object is as follows: {"reportId": ...

Jest combined with Supertest | Looking out for open handles in Jest

I've been struggling to resolve the "Jest has detected the following 2 open handles" message that appears when running my tests. I seem to have hit a roadblock at the moment. One of the tests I'm trying to fix is as follows: describe('PO ...

Determining Cost Using Quantity and Option Changes in Angular 4

Task In the shopping cart, there is a list of items with options, quantities, and prices. The goal is to calculate the total price based on any changes in the quantity and option of an item. Investigation I included [(ngModel)] for 2-way data binding, ...

The integration of VueJS with Axios and the Google Maps API

Currently following [this][1] guide to develop a Google Map and now I am looking to execute a GET request with Axios: axios.get("http://localhost:8080/mapjson").then(function(response) { }) in order to integrate the information from my JSON file into the ...

Utilizing a dictionary within an Angular controller

Currently, I am working on a complex process that involves Angular and MVC controllers interacting with a REST API to retrieve configuration items. The challenge lies in transforming this data into a usable format within the Angular controller for various ...

Gulp- Ensuring the latest versions of your javascript files

I have implemented bundling and minification for my JavaScript files using gulp. What I am aiming to achieve is that whenever I make a change in any of my files and run gulp, a new bundled and minified file with a version number is generated. For example: ...

Oops! The Route.post() function is looking for a callback function, but instead, it received an [object Object

Looking to integrate a password reset feature in my web app, but encountering the error mentioned in the title. Here's a snippet of my code: main.js: const router = express.Router(); const AsyncNewPassword = require('./controller/asyncnewpasswor ...

What could be causing a react element to fail to update?

I'm currently working on a React component that interacts with a MaterialUi text form. The component utilizes a useState hook to update based on the input received. My goal is to have another variable update when the form is submitted, which will be d ...

Getting rid of a texture in three.js

I am attempting to deallocate a texture once it has been loaded in three.js. The texture is loaded using var tex = THREE.ImageUtils.loadTexture("image.png"); and it is being displayed correctly. However, when I attempt to use: tex.dispose(); I consist ...

Issue with window.location.href and unexpected behavior in Firefox 7

I can't seem to figure out the issue I'm encountering on FF7 My ajax calls are returning a json object (jquery). if(data.result=='ok') { var url = baseURL + "azioni/makeForm/" + data.actcode + "/DIA/" + data.az_id; console.log ...

Display various JavaScript function outputs in an HTML table for convenient tracking

Thanks to a helpful user on this platform, I was able to capture data from a JavaScript function and display it in an html table. However, I now have another query. How can I execute the function multiple times during page load and record the results in ...

Choosing a specific page number - kendo grid

Currently, I am working on creating a grid using kendo-telrik. Let's say I have 100 data items, but in the JSON format, I only have 10 data items (assuming each page contains 10 data items for pagination). However, I want to display all the pages (10 ...

Using JavaScript to show content in a textarea field

In my index.jsp file, I have implemented the following code to populate two textareas, INPUT_TEXT and INPUT_TEXT2, with processed data. This involves passing the text through a servlet, a Java class, and finally displaying the preprocessed results in the s ...

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...

Discover the secret to smoothly scrolling to an element in ReactJs

Currently, I am in the process of constructing a Single Page Application (SPA) using React and one key functionality I need to implement is navigation that scrolls to specific sections on the page when clicked. This behavior is similar to how anchor tags w ...