Failed to compile in vue.js browser error - vue.js

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">
Produtos Front
</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>

Answer 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.

Answer 2

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