Vue.js Error "missing param for named route "editarProductos": Expected "id_producto" to be defined"

While configuring HTML buttons in vue.js, I got a warning in console: missing param for named route "editarProductos": Expected "id_producto" to be defined Checking my code, I could infer that I got an issue with slot and slot-scope. Right now I'm working with @vue/cli 5.0.8

Also, in the line "data.item.id" from code down below, "data" reflects a error: "Property 'data' may not exist on type 'Vue3Instance<{ fields: { key: string; label: string; }[]; productos: never[]; },"

I hope u guys could help mE, THANKS...

//C O D E//

<template slot="action" slot-scope="data">
       <b-button size="sm" variant="primary" :to="{ name:'editarProductos', params: 
        {id_producto: data.item.id}}">
        Editar
     </b-button>
     <b-button size="sm" variant="danger">
       Eliminar
     </b-button>

                        </template>
                    
                    </b-table>

                </div>
            </div>
        </div>
    </div>
  

  
<script>
import axios from 'axios';
export default {
    data(){
        return{
            fields: [
                {key: 'nombreProd', label: 'Nombre'},
                {key: 'precioProd', label: 'Precio'},
                {key: 'contenido', label: 'Contenido neto'},
                {key: 'descripcionProd', label:'Descripción'},
                {key: 'action', label:''}
            ],
            productos: []
        }
    },

there is a problem in your code (maybe you are new to vue, it's ok keep it up and you can make it)

For your problem: You don't need data prefix just item.id is enough, see this example: https://vuejs.org/guide/introduction.html#api-styles

And if this still not work then make sure that your params(id_producto) is not required, see this: https://router.vuejs.org/guide/essentials/route-matching-syntax.html#optional-parameters

Back to Top