[Vuejs]-Two figures in one row using vue-chartjs

by

0👍

I solved my issue. Apparently the problem was with my usage of semantic ui. Here is what worked for me in the end:

<template>
  <div class="DisplayResults">
    <h1 class="ui header" v-if="hasResults">Results</h1>
    <div class="ui center aligned grid" v-if="hasResults">
      <div class="six wide column">
        <div class="ui fluid spaced image">
          <Chart v-model="resultsData"/>
        </div>
      </div>
      <div class="six wide column">
        <div class="ui fluid spaced image">
          <ChartN v-model="resultsData"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Chart from '@/components/Chart.vue'
import ChartN from '@/components/ChartN.vue'
import CaseDataState from '@/components/CaseDataState.vue'

export default {
  name: 'DisplayResults',
  components: {
    Chart,
    ChartN,  
    CaseDataState
  },
  computed: {
    hasResults () {
      return (this.resultsData.time) && !(this.running)
    },
    resultsData () {
      return CaseDataState.getters.resultsData
    }
  }
}
</script>

Thanks,

Clemens

Leave a comment