Component in Vue that dynamically updates text based on a given data value

Question

Component in Vue that dynamically updates text based on a given data value

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?

https://i.sstatic.net/aPwJI.png

javascript vue.js

Answer 1

Answer №1

To handle scenarios like this, you can utilize computed properties. Here is an example:

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>

This code snippet provides a general idea of how to approach the issue, but it has not been tested.

Answer 2

To handle scenarios like this, you can utilize computed properties. Here is an example:

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>

This code snippet provides a general idea of how to approach the issue, but it has not been tested.

Component in Vue that dynamically updates text based on a given data value

Answer №1

Similar questions

What is preventing my Three.js object from responding to my commands to move?

As soon as I define a variable in my Vue Vite Tailwind project, my scss file seems to stop functioning properly

NodeJS JSON file write function not updating as expected

Integrating Whatsapp cloud API with a React web application allows for seamless communication between

Expanding the fields in passport.js local strategy

Integrating Python Script with User Input and Output within a JavaScript Web Application

Vue.js is rendering the chart inaccurately in dc.js

Leveraging the boolean values of attributes within JSX statements

Is it possible to create a special case for the beforeunload function?

AJAX should prevent page refresh, but sometimes it forces it

Tips for filling a Rails dropdown list using a JSON array

Navigating the Abyss: Exploring Relationships and Updates in Django Rest Framework with Serializers and Many-to-Many Connections

Modify the properties of the following bdi element that contains text using JQuery

Is there a way to locate the source or URL linked to a button on a form or webpage?

Problem with displaying legends in a stacked bar chart using jqplot

Prevent sluggish script performance using GreaseMonkey

Ways to delete an attribute from a DOM element with Javascript

5 Bootstrap Popovers with Custom HTML Contents

Issue encountered while retrieving values from JSON for the data table

deleting the selected list item with JavaScript