En pocas palabras, tengo un componente
<Device> v-for="device in devices" :key="device.name" :device="device" :name="device.name" :number="device.number" :type="device.type" :status="device.status" :plan="device.plan" :plan_price="device.plan_price" :health="device.health" </Device>Luego los defino en la sección de accesorios del componente.
props: { type: { type: String, default: "" }, number: { type: String, default: "" }, name: { type: String, default: ""}, plan: { type: String, default: "" }, plan_price: { type: String, default: "" }, status: { type: Number, default: 0 }, health: { type: Number, default: 0 }, },Me pregunto si hay una forma de pasar :device="device" sin tener que pasar cada propiedad individual. También quería evitar tener que usar device.name device.property en la plantilla dentro del componente. ¡Gracias por los consejos!
Puede usar v-bind para lograr algún tipo de desestructuración de objetos para accesorios.
<Device> v-for="device in devices" :key="device.id" v-bind="device" </Device> props: { type: { type: String, default: "" }, number: { type: String, default: "" }, name: { type: String, default: ""}, plan: { type: String, default: "" }, plan_price: { type: String, default: "" }, status: { type: Number, default: 0 }, health: { type: Number, default: 0 }, }Demostración: https://stackblitz.com/edit/vue-jngtah?file=src/App.vue