1

Hola quisiera ayuda en poder iterar un índice dentro de cada ${} para indexar las clases, estoy aprendiendo Vue 3 y es lo único que me falta, acá dejaré el código en cuestión.

<script>
export default{
    setup(){
        let servicios = [
            {title: 'OPERACIONES DE BUCEO', logo: ['fas', 'anchor'], class: `icon${}`},
            {title: 'REPARACIÓN DE EMBARCACIONES', logo: ['fas', 'screwdriver-wrench'], class: `icon${}`},
        ]
        return  {
            servicios
        }
    },
    methods:{
        Inum(){
            // this.servicios.forEach(item => {
            //     console.log(item.class);
            // })
        }
    },
    created(){
        this.Inum()
    }
    
}
1
  • Lo quieres mostrar en el template?
    – René
    Commented el 13 may. 2023 a las 21:45

2 respuestas 2

0

Podrías usar map sobre el Array de servicios, por ejemplo:

export default{
    setup(){
        const servicios = [
            {title: 'OPERACIONES DE BUCEO', logo: ['fas', 'anchor']},
            {title: 'REPARACIÓN DE EMBARCACIONES', logo: ['fas', 'screwdriver-wrench']},
        ]
        return  {
            servicios: servicios.map((servicio, index) => ({...servicio, class: `icon${index}`}));
        }
    },
    methods:{
        Inum(){
            // this.servicios.forEach(item => {
            //     console.log(item.class);
            // })
        }
    },
    created(){
        this.Inum()
    }
}

De esta forma se devuelve el mapeo del Array añadiendo el valor del índice dinámicamente.

Puedes ejecutar lo siguiente para que veas la salida:

const servicios = [
  {title: 'OPERACIONES DE BUCEO', logo: ['fas', 'anchor']},
  {title: 'REPARACIÓN DE EMBARCACIONES', logo: ['fas', 'screwdriver-wrench']},
];

console.log(servicios.map((servicio, index) => ({...servicio, class: `icon${index}`})))
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

2
  • Usar chatGPT para responder está prohibido. Tu cuenta podría ser sancionada
    – Zerotet
    Commented el 14 may. 2023 a las 2:55
  • ¿Y cómo aseguras que está usando chatGPT? :-)... Commented el 14 may. 2023 a las 13:13
0

Te dejo por aquí otra manera de hacerlo. Con un for in podrías obtener el mismo resultado.

let servicios = [
    {title: 'OPERACIONES DE BUCEO', logo: ['fas', 'anchor'], class: 'icon'},
    {title: 'REPARACIÓN DE EMBARCACIONES', logo: ['fas', 'screwdriver-wrench'], class: 'icon'},
    {title: 'REPARACIÓN DE EMBARCACIONES', logo: ['fas', 'screwdriver-wrench'], class: 'icon'},
]

var i = 0;

for (let clave in servicios){
  var icon = servicios[clave].class;
  var contador = i++;
  console.log(icon+contador);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.