Failed to compile in vue.js browser error

Question

I got stuck into an error that shows in the browser

Failed to compile.

./src/services/produtos.js Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\romul\Vue Projects\produto-client\src\services\produtos.js
9:13 error 'produto' is defined but never used no-unused-vars

✖ 1 problem (1 error, 0 warnings)

I´m following a tutorial on the internet but i can´t find what is wrong.

Here´s the produtos.js code

import {http} from './config'

export default {

    listar:() => {
        return http.get('produtos')
    },

    salvar:(produto) => {
        return http.post('produto')
    }
}

And here is the App.vue

      <template>
      <div id="app">

      <template>
  <div id="app">
    <nav>
      <div class="nav-wrapper blue darken-1">
        <a href="#" class="brand-logo center">Produtos Front</a>
      </div>
    </nav>

    <div class="container">
      {{produto.nome}}
      <form>
        <label>Nome</label>
        <input type="text" placeholder="Nome" v-model="produto.nome" />
        <label>Quantidade</label>
        <input type="number" placeholder="QTD" v-model="produto.quantidade" />
        <label>Valor</label>
        <input type="text" placeholder="Valor" v-model="produto.valor" />

        <button class="waves-effect waves-light btn-small">
          Salvar
          <i class="material-icons left">save</i>
        </button>
      </form>

      <table>
        <thead>
          <tr>
            <th>NOME</th>
            <th>QTD</th>
            <th>VALOR</th>
            <th>OPÇÕES</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="produto of produtos" :key="produto.id">
            <td>{{produto.nome}}</td>
            <td>{{produto.quantidade}}</td>
            <td>{{produto.valor}}</td>
            <td>
              <button class="waves-effect btn-small blue darken-1">
                <i class="material-icons">create</i>
              </button>
              <button class="waves-effect btn-small red darken-1">
                <i class="material-icons">delete_sweep</i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Produto from "./services/produtos";
export default {
  data() {
    return {
      produto: {
        nome: "",
        quantidade: "",
        valor: ""
      },
      produtos: []
    };
  },

  mounted() {
    Produto.listar().then(resposta => {
      console.log(resposta.data);
      this.produtos = resposta.data;
    });
  }
};
</script>

<style>
</style>

Hank X · Accepted Answer · 2020-03-09 03:48:00Z

1

in your produto.js file. salvar function, change to this:

salvar:() => {
        return http.post('produto')
    }

So you defined a produto, but never used in the function, that's why your eslint reports this error.

answered Mar 9, 2020 at 3:48

Hank X

2,0542 gold badges15 silver badges33 bronze badges

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

4 Comments

Rômulo Sorato Over a year ago

So the tutorial is wrong? In the video he´is explicitly said to put the produto as a parameter

Hank X Over a year ago

I did not watch the video, maybe just because your env is not as same as in the tutorial, this is a eslint error, actually your app can run without error if you disable eslint.

Rômulo Sorato Over a year ago

How can i disable eslint?

Hank X Over a year ago

@RômuloSorato create a .eslintignore file at the root of your project, and input **/*

Parth Jawale · Accepted Answer · 2020-03-09 09:19:53Z

1

This is and extension of Hank's answer. Since you say its explicitly mentioned in the video to put produto as a parameter, try removing the inverted commas in the http post call:

salvar:(produto) => {
        return http.post(produto)
    }

answered Mar 9, 2020 at 9:19

Parth Jawale

391 bronze badge

Collectives™ on Stack Overflow

Failed to compile in vue.js browser error

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related