Call a function within square brackets that you may not be familiar with

As a newcomer to Javascript and vue.js, I recently started using Vue to create a management system for our company. While studying codes online to learn how to use it efficiently, I came across a code fragment that puzzled me. How can I define a function in square brackets?

This code is specifically used for vuex.

//mutation-types.js
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME'
export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME'
export const SAVE_PLAN = 'SAVE_PLAN'
export const DELETE_PLAN = 'DELETE_PLAN'

//mutation.js
import * as types from './mutation-types'
export default {
  [types.ADD_TOTAL_TIME] (state, time) {
    state.totalTime = state.totalTime + time
  },
  [types.DEC_TOTAL_TIME] (state, time) {
    state.totalTime = state.totalTime - time
  },
  [types.SAVE_PLAN] (state, plan) {
    const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256'
    state.list.push(
      Object.assign({name: 'Jack', avatar: avatar}, plan)
    )
  },
  [types.DELETE_PLAN] (state, idx) {
    state.list.splice(idx, 1)
  }
}

Functions Naming Function Call

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

How to determine the length of a JavaScript object

Would like help determining the length of the report_data(object) key using the provided code, but it seems to result in a value of 3. a={report_freq: "daily", report_item_num: 2, report_num: 39, report_data: "{}"} Object {report_freq: "daily", report_ite ...

Algorithm to identify the highest sum of two numbers in a disorganized array of whole numbers

I am looking to create a function that can identify the largest pair sum in an unordered sequence of numbers. largestPairSum([10, 14, 2, 23, 19]) --> 42 (sum of 23 and 19) largestPairSum([99, 2, 2, 23, 19]) --> 122 (sum of 99 and 23) largestPairSum ...

What is the best way to show two icons next to each other within a React component?

For my school project, I am working on developing an app and encountering a challenge. I have been trying to display two icons side by side on a screen using React (I've been learning React for 5 months but still consider myself a beginner). However, ...

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

While we are familiar with pseudo-classes like :before and :after, have you ever wondered why there is no nav ul li a:left or :right? Do you think it's achievable? I'm open to using HTML5, CSS3, and JavaScript to make it happen. ...

What is the process to ensure a React JS click handler updates the DOM upon execution?

I have almost completed a demo app using React JS, where data is displayed in a table. In the status column, hovering over an item triggers a popup div with 3 options to click on. After clicking on an option, I am able to run the click handler, but I' ...

Is it possible to retrieve the `arguments` objects if one of the parameters is named "arguments"?

This code snippet will output 1: (function (params) { console.log(params); }(1, 2)); The params object has replaced the default arguments. Can we retrieve the original arguments object within the function's scope? ...

The collapse menu toggle feature seems to be malfunctioning, as it is not functioning properly

I've been working on a website at , where the toggle menu is causing the content to hide when the menu is expanded. <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active"> <div class= ...

Keep going in the for await loop in NodeJS

My code snippet looks like this: for await (const ele of offCycles) { if ((await MlQueueModel.find({ uuid: ele.uuid })).length !== 0) { continue; } <do something> } I'm curious if it's possible to use a continue st ...

Adjust the position of an image to move it closer to the top using CSS

I have a fiddle where I am trying to adjust the position of an image (keyboard) to match a specific design. https://i.sstatic.net/flqCH.png In my fiddle, the keyboard image is slightly lower than the desired position shown in the design. I am looking for ...

Compress a file using Maven and save it to a non-Java application folder

Is it feasible to implement versioning for zipped files of VUE.js applications in a Jenkins pipeline using Maven, even though they are not Java apps? I have successfully done this for other apps with Java using Maven, POM, Maven-Metadata-Plugin, Jenkins, a ...

When employing vue.set within Vuex, it seems that the state is not getting properly updated

Today, I encountered an issue while trying to add an object into a nested array. Despite successfully using similar code for other states, it does not seem to be working this time around. I can't help but wonder if the problem lies in the fact that i ...

Splitting data in NodeJS sockets

Whenever I encounter the need to divide data, my standard practice involves converting it into a string format. Here's an example of how I handle data in my function: socket.on('data', function (data) { var str = data.toString().spl ...

How can I troubleshoot email validation issues in Vue.js?

<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...

What could be causing the issue of images not loading in Chrome while they are loading perfectly in Mozilla when using CSS3?

Recently, I dove into a project utilizing react with webpack, and everything was smooth sailing until I encountered the CSS hurdle. Despite successfully configuring webpack, trouble brewed when it came to styling. Specifically, setting the background image ...

Exploring the Integration of Medium Widgets within a React Website

I stumbled upon an incredible link here that generates widgets for Medium posts. Unfortunately, I encountered difficulties when trying to incorporate the code into a react website. For example, for a random Medium author: <div id="medium-widget">& ...

Protractor is having difficulty finding the specified element or value

Here is some HTML code snippet: <tab id="briefcase" ng-controller="BriefcaseController as vm" active="main.uiState.briefcaseOpen"> <tab-heading> <i class="glyphicon glyphicon-briefcase"></i><br> ...

Is it possible to collapse and expand individual rows within the Material-UI DataGrid component?

Is there a way to create expand-collapse functionality for each row in Material-UI DataGrid? While I understand that we can achieve this with TableRow and manual rendering (Collapsible table), I am wondering if it is possible within the DataGrid component ...

Aptana - Expose the Declaration

After hearing rave reviews about Aptana being the best IDE for JavaScript, I decided to download it. I grabbed a project from GitHub, found a method call in the code, right clicked on it, and saw 'open declaration - F3'. However, when I tried bot ...

Type Error: Issue encountered while resolving module specifier

Upon trying to import the d3.js library in a project that utilizes npm, I encountered the error message: TypeError: Error resolving module specifier: d3. This issue specifically occurred while using Firefox. index.html <!DOCTYPE html> <html lang ...

The hexagons configuration for tsParticles is experiencing technical difficulties

I'm struggling to implement the tsParticles library (specifically using react-tsparticles) in combination with the latest version of Next.js. However, when I try to use the particle.json file and bind it to the <Particles/> component, the partic ...