0
265
VistasComponente Vue para cambiar el texto según el valor de los datos
Estos son los datos que obtengo y lo que puedo reemplazar el contenido de los datos con texto legible:
De padre:
data: [ { name: 'discounts_offers', type: 'EMAIL', consent: true }, { name: 'newsletter', type: 'EMAIL', consent: true }, { name: 'product_upgrade', type: 'EMAIL', consent: true }, { name: 'sms_offer', type: 'SMS', consent: true }, { name: 'post_offer', type: 'POST', consent: true } ]Este es mi componente incluido
<CommunicationPreference v-for="(communication, index) in data" :key="index" :communication="communication" />A continuación, la comunicaciónPreferencia.vue:
<template> <section> {{ communication.name }} //This should be Newsletters etc </section> </template> <script> export default { props: { communication: { type: Object, default: null, }, }, data() { return {} }, computed: {}, } </script> Entonces lo que me gustaría hacer es si {{ communication.name }} es igual a 'discounts_offers' para usar el texto "Descuentos y ofertas" como las imágenes adjuntas. ¿Alguna solución para el mejor enfoque para esto?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar la propiedad calculada para un escenario como este. Algo como esto.
App.vue
<template> <CommunicationPreference v-for="(communication, index) in preferences" :key="index" :type="communication.type" :name="communication.name" v-model:consent="preferences[index].consent" /> </template> <script> import CommunicationPreference from "./components/CommunicationPreference.vue"; export default { name: "App", components: { CommunicationPreference, }, data() { return { preferences: [ { name: "discounts_offers", type: "EMAIL", consent: true }, { name: "newsletter", type: "EMAIL", consent: true }, { name: "product_upgrade", type: "EMAIL", consent: true }, { name: "sms_offer", type: "SMS", consent: true }, { name: "post_offer", type: "POST", consent: true }, ], }; }, }; </script> y en CommunicationPreference.vue
<template> <div> <label ><input type="checkbox" name="preference" :value="consent" :checked="consent === true" @change="$emit('update:consent', $event.target.checked)" />{{ label }}</label > </div> </template> <script> export default { name: "CommunicationPreference", props: { type: String, name: String, consent: Boolean, }, computed: { label() { if (this.name === "newsletter") { return "Newsletters"; } if (this.name === "discounts_offers") { return "Discount and offers"; } if (this.name === "product_upgrade") { return "Upgrade recommendations"; } return this.name; }, }, }; </script>Algo así... aunque no probado.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta