Home / Questions / 502495
Accepted
Darinel Cigarroa
Asked: 2022-05-11 01:48:34 +0800 CST 2022-05-11 01:48:34 +0800 CST

Eslint Preset error in vueJS2

  • 772

Hello, I am declaring my next computed function and Slint marks me an error in syntax that I cannot understand, my computed method is the following and I immediately attach the error that this throws at me. Computed property:

  columns() {
          return this.columnNamesFromCsv.map((columnName) => {
            return {
              name: columnName,
              label: columnName,
              align: 'center',
              sortable: true,
              field: (row) => row[columnName]
            };
          });
        }

Mistake:

 error    Unexpected block statement surrounding arrow body; parenthesize the returned value and move it immediately after the `=>`

Thank you in advance for your responses and opinions.

vue.js

1 Answers

  1. Best Answer

    The error is the following:

    ESLint recommends omitting "return" in the declaration of an arrow function when the function has only one statement. That is, instead of

    const multiplica = (a,b) => {
  return a*b;
};

    we should use

    const multiplica = (a,b) => a*b;

    But the problem is that if you want to return an object, you can't transform something like

    const multiplica = (a,b) => {
  return {
    factores: [a,b],
    resultado: a*b
  }
}

    in this: 

    const multiplica = (a,b) => { factores: [a,b], resultado: a*b};

    Because we have an ambiguity: the braces are understood as the beginning of the block and not as the declaration of an object, causing an error.

    But there is a solution, and it is the one that gives you the error message:

    Unexpected block statement surrounding arrow body; parenthesize the returned value and move it immediately after the=>

    Approximate translation:

    Unexpected block (referring to braces) around the body of the arrow function. Put the return value in parentheses (I think parenthesis as a verb does not exist) and put it immediately after the=>

    That is, something like:

    const multiplica = (a,b) => ({ factores: [a,b], resultado: a*b});

console.log(multiplica(2,3));

    In your case it would be:

    columns() {
  return this.columnNamesFromCsv.map(
    (columnName) => ({
      name: columnName,
      label: columnName,
      align: 'center',
      sortable: true,
      field: (row) => row[columnName]
    })
  );
}
    • 1