Vue component to change text based on data value

Question

This is the data I get and I what to be able to replace the data content with readable text:

From parent:

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

This is my included component

  <CommunicationPreference
    v-for="(communication, index) in data"
    :key="index"
    :communication="communication"
  />

Then the communicationPreference.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>

Then what I would like to do is if {{ communication.name }} equals 'discounts_offers' to use the text "Discounts and offers" like the images attached. Any solutions for the best approach to this?

nicholasnet · Accepted Answer · 2022-03-31 20:52:58Z

2

You can use computed property for scenario like this. Something like this.

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>

and in 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>

Something like that....not tested though.

edited Mar 31, 2022 at 20:52

answered Mar 31, 2022 at 16:13

nicholasnet

2,3174 gold badges25 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pianoc Over a year ago

Could you just show some working html with this as I just get an error, maybe misunderstanding

Pianoc Over a year ago

I've update my question so that it hopefully helps

nicholasnet Over a year ago

I updated the code.

Collectives™ on Stack Overflow

Vue component to change text based on data value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related