[Vuejs]-Best way to do calculation on a property of a Prop(coming from the parent) object and put the result in the template

by

0👍

Try this

<template>
  <div>
    <label label="id" :value="objectFromParent.id" />
    <label label="ip" :value="objectFromParent.ip" />
    <label label="ip" :value="calculateProfiles" />
  </div>
</template>

<script>
export default {
  props: {
    objectFromParent: {
      type: Object,
      default() {
        return {
          id: '111',
          ip: '10.192.1.112',
          profiles: ['Japan', 'Japan222'],
          network: [
            {
              plan_id: 'PLAN-UUID',
              plan_name: '1BCT'
            },
            {
              plan_id: 'PLAN-UUID',
              plan_name: '1BCT2'
            }
          ],
          status: 'LOCKED',
          last_downloaded: '1547672769000'
        }
      }
    }
  },
  computed: {
    calculateProfiles() {
      return this.profiles.join(',')
    }
  }
}
</script>

To help him on the comment:

<label label="ip">
  <md-icon v-if="objectFromParent.status==='LOCKED'">lock</md-icon>
  {{calculateProfiles}}
</label>

Leave a comment