Solution 1 :

Try simply like below:

<div :data-country="dataCountry"></div>

and so on, with all the necessary attributes!

Solution 2 :

Try to return the attribute name from the computed properties not the value :

    <div
      :[dataCountry]="country"
      :[dataCustomerFirstname]="firstname"
      :[dataCustomerLastname]="lastname"
    >


<script>
export default {
  name: "ExampleComponent",
  data() {
    return {
      country:"ukraine",
      firstname: "Doe",
      lastname: "Joe"
    }
  },
  computed: {
    dataCountry: function () {
      return (this.country !== "") ? 'data-applicant-country': '';
    },
    dataCustomerFirstname:function (){
      return (this.firstname !== "")? 'data-applicant-firstname' :'';
    },
    dataCustomerLastName:function (){
      return (this.lastname !== "")?'data-applicant-lastname' :''
    },

  },
}
</script>

Problem :

How can I set data-* attributes of a div dynamically via an array or object in Vue.js?

I found out that it is possible to set attributes dynamically via the data attributes or via calculated properties.
But the problem is that I don’t know how to name the calculated properties so that they end up with the attribute name “data-customer-firstname”, for example.

Link to the vue.js doc

I hope someone have an idea to solve the problem.

EDIT (here is an example):

<template>
  <div class="content">

    <div
        :[dataCountry]
        :[dataApplicantFirstname]
        :[dataApplicantLastName]
    ></div>

    <!-- the result I needed -->

    <div
      data-country="ukraine"
      data-applicant-firstname="Doe"
      data-applicant-lastname="Joe"
    >
    </div>

    <!--
    but if one of them is "null" it should be ignored
    for example if the country and the firstname are "null" so it
    should be ignored and it should likes so:
    -->
    <div
        data-applicant-lastname="Joe"
    >
    </div>


  </div>
</template>

<script>
export default {
  name: "ExampleComponent",
  data() {
    return {
      country:"ukraine",
      firstname: "Doe",
      lastname: "Joe"
    }
  },
  computed: {
    dataCountry: function () {
      return (this.country !== "") ? this.country : null;
    },
    dataCustomerFirstname:function (){
      return (this.firstname !== "")?this.firstname : null;
    },
    dataCustomerLastName:function (){
      return (this.lastname !== "")?this.lastname : null;
    },

  },
}
</script>

Comments

Comment posted by dominagy

Can you may provide some of your code to be a bit more specific?

Comment posted by Laberkopf

hey @dominagy thanks for your answer. I have added an example.

By