CODEWITHSUNDEEP
vue.js
Rômulo Sorato
Rômulo Sorato

Reputation: 1651

Failed to compile in vue.js browser error

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>

Upvotes: 1

Views: 227

Answers (2)

Parth Jawale
Parth Jawale

Reputation: 39

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)
    }

Upvotes: 1

Hank X
Hank X

Reputation: 2054

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.

Upvotes: 1

Related Questions