What is the reasoning behind the consistent addition or subtraction of 7 from the initial data value upon mounting?

When the addsevendays and minussevendays methods are attached to buttons, they should add or subtract seven days from the date each time they are clicked. However, currently it only performs this action once in either direction. For example, if the date is 2019-09-10, it will only ever move to either 2019-09-17 or 2019-09-03.

Shouldn't it update from the new state?

data: () => ({
   today: null,
}),

addSevenDays() {
    this.today = moment().add(7, 'days').format("YYYY-MM-DD"));
    console.log(this.today);
},      
minusSevenDays() {
    this.today = moment().subtract(7, 'days').format("YYYY-MM-DD");
    console.log(this.today);
}

mounted () {
    this.today = moment().format('YYYY-MM-DD');
}

Answer №1

Always remember to retrieve the current time using moment() when using add Functions.

Make sure to replace all instances of moment() in your functions with moment(this.today)

new Vue({
  el: '#app',
  data: {
    today: null,
  },
  methods: {
     addSevenDays() {
    this.today = moment(this.today).add(7, 'days').format("YYYY-MM-DD");
    console.log(this.today);
  },      
  minusSevenDays() {
    this.today = moment(this.today).subtract(7, 'days').format("YYYY-MM-DD");
    console.log(this.today);
  }
  },
   mounted () {
    this.today = moment().format('YYYY-MM-DD');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

  <div id="app">
  <button @click="minusSevenDays">-</button>{{ today }}<button @click="addSevenDays">+</button>
</div>

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

Creating a list in React and adding a delay using setTimeout() method

I'm a beginner when it comes to working with React and I've been attempting to display a list of posts using a JSON array. My goal is to have the list render after a certain number of seconds, but for some reason, the list isn't rendering us ...

Is there a way to adjust the height pixel value in my code so it can be dynamic?

I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height ea ...

Leveraging the content delivery network for react-select in a react.js project

I'm having trouble using react-select with cdn. I attempted to download the cdn for react-select but keep encountering an error stating that 'select is not defined'. I also tried downloading the zip package for react-select, but I am unsure ...

Implementing Conditional Attribute Addition in Vue.js

When developing in vue, I encountered this scenario: <v-dialog v-model="data_table.dialog"> I have a variable called is_mobile that is observable. My goal is to modify the tag above based on the value of is_mobile. For instance: <v-dialog v-mod ...

Consider creating a distinct document for your "scripts"

Within my package.json configuration file, the "scripts" section contains numerous commands structured as shown below. "scripts" { "script1": "command example", "script2": "command example", "script3": "command example", "script4": "command exampl ...

Save Bson query as a Javascript log

When working with Java to create a complex MongoDB query, I often log the query before executing it: log.info("Filter: {}", queryFilter); The logged query output typically looks like this: And Filter{filters=[Filter{fieldName='FinInstrmGnlAttrbts.C ...

Prevent certain dates from being selected in a designated input field

I am facing an issue with disabling certain array dates for a specific input field in a datepicker calendar. Even though I have included the script to exclude those dates, they are not getting disabled for that particular input field. html <input cla ...

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

My goal is to create a header with the following functionalities: Initially displays with a transparent background Upon scrolling down the page by 25px, it will dynamically add the header--maroon class to the header, which alters the background color and ...

Tips for eliminating fade effect during hover in networkD3 chart in R

Currently, I have been exploring the usage examples of networkd3 in r I am curious if there is a way to eliminate the hover effect where everything else fades when hovering over a specific node in the graph. For reference, check out "Interacting with igra ...

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

The Element Datepicker incorrectly displays "yesterday" as an active option instead of disabled when the timezone is set to +14

After adjusting my timezone to +14 using a chrome plugin, I noticed that the calendar app is displaying incorrect disabled dates. You can view the issue here. This is the formula I'm currently utilizing to disable dates: disabledDate(time) { re ...

Troubleshooting a JavaScript Error in AngularJS Module

I created a Module called "app" with some helper functions in the file "scripts/apps.js": angular.module('app', ['ngResource']).run(function($scope){ $scope.UTIL = { setup_pod_variables: function (pods){...} ... }); Now, I want to ...

Alternative techniques apart from submitting

Within my PHP submit form, I have integrated a PHP image gallery that pulls images from a specific folder (with a dropdown to select images from different folders). When I click on an image in the gallery, the path to that image is automatically entered i ...

What is the local date format for the Ionic DatePicker?

I have successfully implemented a DatePicker in my Ionic Project, but the date is displaying in the wrong time format. Here is my function: showDatePicker(){ this.datePicker.show({ date: new Date(), mode: 'date', allowOldDates: fal ...

Issue: There is no specified method of transportation established

I'm facing an issue while trying to create an Outlook calendar event from my application using Express.js. The error message I am receiving is [Error:No transport method defined], and eventually, the response returns as 200 success after approximately ...

What is the method for defining a monkey patched class in a TypeScript declarations file?

Let's say there is a class called X: class X { constructor(); performAction(): void; } Now, we have another class named Y where we want to include an object of class X as a property: class Y { xProperty: X; } How do we go about defining ...

"Enhance your coding experience in VS Code with intelligent auto-completion for JavaScript files using type definitions that support import

Hey there! I've been experimenting with declaring custom types in d.ts files and using them in jsdoc annotations in JavaScript files to enable intellisense in VS Code. Let's take a look at an example: In the file types.d.ts import { Request } ...

Display a hidden div upon loading the page if a certain condition is met

As a beginner in this field, I am struggling to assist a friend with a project. He needs a simple quote form that can generate HTML quotes for his client on a private WordPress page. The form should display a specific div based on the radio button selecti ...

Is there a method to distinguish a true VR HEADSET from a device that simply allows VR capabilities?

I've been on the hunt, but haven't had any luck finding a solution. I'm currently working on a three.js WebGL VR experience and I want to restrict access to VR headsets only, excluding mobile phones. Right now, the only thing I can detect i ...

Retrieve elements from an array based on the value of an object

I have a list of items that resembles the following structure: var entries = [ { sys: {id:"1"}, fields: "article1" }, { sys: {id:"2"}, fields: "place1" }, { sys: {id:"3"}, fields: "offer2" }, { sys: {id:"1"}, fields: "article2" }, { sys: {id:"1" ...