使用 vue-chartjs 将两个数字排成一行答案

【问题标题】：Two figures in one row using vue-chartjs使用 vue-chartjs 将两个数字排成一行
【发布时间】：2019-09-10 11:56:57
【问题描述】：

我使用 vue-chartjs 在我的 vue 应用程序中显示一些图形，其中我使用语义 UI 进行布局。

我想在屏幕上显示两个并排的人物，但不知何故我无法做到这一点。

我尝试在其他组件中使用模板，但这似乎不适用于 vue-chartjs。我还尝试使用语义 ui 中的两个字段功能，但没有成功。

这里是一些代码sn-ps：

<template>
  <div class="DisplayResults">
    <div class="ui relaxed divided padded full grid">
      <div class="column">
        <div class="ui tiny form">
          <div class="two fields">
      <div class="field eight wide">
        <Chart class="Chart" v-model="resultsData" v-if="hasResults" />
      </div>
      <div class="field eight wide">
        <ChartN class="Chart" v-model="resultsData" v-if="hasResults"/>
      </div>
    </div>
  </div>
</template>

import Chart from '@/components/Chart.vue'
import ChartN from '@/components/ChartN.vue'
import CaseDataState from '@/components/CaseDataState.vue'

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

谁能帮助我如何实现这一目标？

【问题讨论】：

为什么CaseDataState被声明出components: {}，他不是一个组件？

标签： javascript vue.js vuejs2 semantic-ui vue-chartjs

【解决方案1】：

我解决了我的问题。显然问题出在我对语义 ui 的使用上。以下是最终对我有用的方法：

<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>

谢谢，

克莱门斯

【讨论】：