CalculatedProperties.vue

<template>
  <v-card>
    <v-card-text>
      <v-row dense no-gutters>
        <v-col
          v-for="item in properties"
          :key="item.propLabel"
          cols="12"
          sm="6"
          lg="4"
          xl="3"
        >
          <v-list dense>
            <v-list-item :key="item.propLabel">
              <v-list-item-content>
                <v-list-item-title>
                  <div class="d-flex justify-space-between">
                    <div>
                      <b>{{ item.propLabel }}:</b>
                    </div>
                    <div>
                      {{ item.propValue }}
                    </div>
                  </div>
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-divider :key="`${item.propLabel}-divider`" />
          </v-list>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      properties: [
        {
          propLabel: 'Mol. Weight',
          propValue: '494.3',
        },
        {
          propLabel: 'MW. Monoisotopic',
          propValue: '180.0423',
        },
        {
          propLabel: 'ALogP',
          propValue: '1.31',
        },
        {
          propLabel: '#Rotatable Bonds',
          propValue: '2',
        },
        {
          propLabel: 'Polar Surface Area',
          propValue: '63.60',
        },
        {
          propLabel: 'Molecular Species',
          propValue: 'ACID',
        },
        {
          propLabel: 'HBA',
          propValue: '3',
        },
        {
          propLabel: 'HDB',
          propValue: '1',
        },
        {
          propLabel: '#Ro5 Violations',
          propValue: '0',
        },
        {
          propLabel: 'HBA (Lipinski)',
          propValue: '4',
        },
        {
          propLabel: 'HBD (Lipinski)',
          propValue: '1',
        },
        {
          propLabel: '#Ro5 Violations (Lipinski)',
          propValue: '0',
        },
        {
          propLabel: 'CX Acidic pKa',
          propValue: '3.41',
        },
        {
          propLabel: 'CX Basic pKa',
          propValue: '--',
        },
        {
          propLabel: 'CX LogP',
          propValue: '1.24',
        },
        {
          propLabel: 'CX LogD pH7.4',
          propValue: '-2.16',
        },
        {
          propLabel: 'Aromatic Rings',
          propValue: '1',
        },
        {
          propLabel: 'Heavy Atoms',
          propValue: '13',
        },
        {
          propLabel: 'QED Weighted',
          propValue: '0.55',
        },
      ],
    }
  },
}
</script>

<style></style>