- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个从 vuex 获取状态的计算属性。在 vuex 内部,状态是使用 axios 设置的,以从我的 api 获取一些数据。我的问题是,当我尝试在我的方法中使用此计算属性时,我收到未定义的错误。这是因为我尝试使用在 vuex 存储中设置之前的数据。那么,在我尝试在我的方法中使用 boardColumnData 之前,如何确保它已设置?
错误:
Error in mounted hook: "TypeError: Cannot read property 'total' of undefined"
TypeError: Cannot read property 'total' of undefined
AppCharts.vue
<template>
<div id="chart_section">
<div id="charts" v-if="boardColumnData">
<DoughnutChart :chart-data="datacollection" :options="chartOptions" class="chart"></DoughnutChart>
<button v-on:click="fillData">Fill Data</button>
</div>
</template>
<script>
import DoughnutChart from './DoughnutChart';
import { mapGetters } from 'vuex';
export default {
components: {
DoughnutChart
},
computed: {
...mapGetters(['boardColumnData']),
},
data() {
return {
datacollection: null,
chartOptions: null
}
},
mounted() {
this.fillData();
},
methods: {
fillData() {
this.datacollection = {
datasets: [{
data: [this.boardColumnData[0].total.$numberDecimal, this.boardColumnData[1].total.$numberDecimal, this.boardColumnData[2].total.$numberDecimal, this.boardColumnData[3].total.$numberDecimal],
backgroundColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
borderColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
}]
};
this.chartOptions = {
responsive: true,
maintainAspectRatio: false,
};
}
}
}
</script>
DoughtnutChart.vue
<script>
import { Doughnut, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
export default {
extends: Doughnut,
mixins: [reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
vuex 商店:
import axios from 'axios';
const state = {
defaultPosts: [],
boardPosts: [],
boardColumnData: [],
};
const getters = {
boardColumnData: state => state.boardColumnData,
};
const actions = {
getAllBoardPostData: ({commit}) => {
function getBoardColumns() {
return axios.get('http://localhost:5000/api/summary-board/columns');
}
function getBoardPosts() {
return axios.get('http://localhost:5000/api/summary-board/posts');
}
axios.all([getBoardColumns(), getBoardPosts()])
.then(axios.spread((columnData, postData) => {
let rawPosts = postData.data;
let columns = columnData.data;
let posts = Array.from({length: columns.length}, () => []);
rawPosts.forEach((post) => {
// If column index matches post column index value
if(posts[post.column_index]){
posts[post.column_index].push(post);
}
});
columns.forEach((column, index) => {
let columnTotal = 0;
posts[index].forEach((post) => {
columnTotal += post.annual_value;
});
column.total.$numberDecimal = columnTotal;
});
commit('setBoardColumns', columns);
commit('setBoardPosts', posts);
commit('setDefaultPosts', posts);
}))
.catch(error => console.log(error));
}
};
const mutations = {
setDefaultPosts: (state, payload) => {
state.defaultPosts = payload;
},
setBoardPosts: (state, payload) => {
state.boardPosts = payload;
},
setBoardColumns: (state, payload) => {
state.boardColumnData = payload;
}
};
export default {
state,
getters,
actions,
mutations
};
boardColumnData 看起来像这样:
[
{
"name": "Opportunities",
"percentage": {
"$numberDecimal": "0"
},
"total": {
"$numberDecimal": 70269
}
},
{
"name": "Prospects",
"percentage": {
"$numberDecimal": "0.25"
},
"total": {
"$numberDecimal": 0
}
},
{
"name": "Proposals",
"percentage": {
"$numberDecimal": "0.5"
},
"total": {
"$numberDecimal": 5376
}
},
{
"name": "Presentations",
"percentage": {
"$numberDecimal": "0.75"
},
"total": {
"$numberDecimal": 21480
}
},
{
"name": "Won",
"percentage": {
"$numberDecimal": "1"
},
"total": {
"$numberDecimal": 0
}
},
{
"name": "Lost",
"percentage": {
"$numberDecimal": "1"
},
"total": {
"$numberDecimal": 0
}
},
{
"name": "No Opportunity",
"percentage": {
"$numberDecimal": "1"
},
"total": {
"$numberDecimal": 0
}
}
]
最佳答案
一旦数据到达商店,Vue 应该能够处理更新组件的 react 性,并且由于您将其正确地传递到组件中,我认为您只需要进行一些小的调整即可使组件更 react 性的。我会将 datacollection
移至计算属性,因为它仅依赖于商店的 boardColumnData
,然后您可以将 chartOptions
移至最初定义,因为它只是静态数据?
export default {
data: () => ({
// datacollection: null, // remove this
chartOptions: {
responsive: true,
maintainAspectRatio: false,
},
},
//...
computed: {
...mapGetters([
'boardColumnData'
]),
datacollection() { // Property added to computed properties
if (this.boardColumnData.length) { // - check for boardColumnData before using it
return {
datasets: [{
data: [this.boardColumnData[0].total.$numberDecimal, this.boardColumnData[1].total.$numberDecimal, this.boardColumnData[2].total.$numberDecimal, this.boardColumnData[3].total.$numberDecimal],
backgroundColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
borderColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
}]
};
} else {
return null;
}
}, // end dataCollection()
},
//... rest of component...
然后在模板中,只需检查 datacollection
是否具有值。例如:
<template>
<div id="chart_section">
<div id="charts" v-if="datacollection">
<DoughnutChart
:chart-data="datacollection"
:options="chartOptions"
class="chart"
/>
</div>
</div>
</template>
关于javascript - Vue.js:在方法中使用计算属性返回未定义的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61349241/
SQL 和一般开发的新手,我有一个表(COUNTRIES),其中包含字段(INDEX、NAME、POPULATION、AREA) 通常我添加一个客户端(Delphi)计算字段(DENSITY)和 On
我想使用 calc(100%-100px),但在我的 demo 中不起作用由于高度只接受像素,因此如何将此百分比值转换为像素。 最佳答案 以下将为您提供高度: $(window).height();
我正在尝试在 MySQL 中添加列并动态填充其他列。 例如我有一张表“数字”并具有第 1 列、第 2 列、第 3 列,这些总数应填充在第 4 列中 最佳答案 除非我误解了你的问题,否则你不只是在寻找:
我想返回简单计算的结果,但我不确定如何执行此操作。我的表格如下: SELECT COUNT(fb.engineer_id) AS `total_feedback`, SUM(fb.ra
我一直在尝试做这个程序,但我被卡住了,我仍然是一个初学者,任何帮助将不胜感激。我需要程序来做 打印一个 10 X 10 的表格,其中表格中的每个条目都是行号和列号的总和 包含一个累加器,用于计算所有表
这个计算背后一定有一些逻辑。但我无法得到它。普通数学不会导致这种行为。谁能帮我解释一下原因 printf ("float %f\n", 2/7 * 100.0); 结果打印 1.000000 为什么会
我想计算从 0 到 (n)^{1/2} - 1 的数字的 AND每个数字从 0 到 (n)^{1/2} - 1 .我想在 O(n) 中执行此操作时间,不能使用 XOR、OR、AND 运算。 具体来说,
如何在 Excel 中将公式放入自定义数字格式?例如(出于说明目的随机示例), 假设我有以下数据: 输入 输出 在不编辑单元格中的实际数据的情况下,我想显示单元格中的值除以 2,并保留两位小数: 有没
每次我在 Flutter 应用程序中调用计算()时,我都会看到内存泄漏,据我所知,这基本上只是一种生成隔离的便捷方法。我的应用程序内存占用增加并且在 GC 之后永远不会减少。 我已将我的代码简化为仅调
我有数字特征观察 V1通过 V12用于目标变量 Wavelength .我想计算 Vx 之间的 RMSE列。数据格式如下。 每个变量“Vx”以 5 分钟的间隔进行测量。我想计算所有 Vx 变量的观测值
我正在寻找一种使用 C 语言计算文件中未知字符数的简单方法。谢谢你的帮助 最佳答案 POSIX 方式(可能是您想要的方式): off_t get_file_length( FILE *file ) {
我正在使用 Postgres,并且我正试图围绕如何在连续日期跨度中得出第一个开始日期的问题进行思考。例如 :- ID | Start Date | End Date =================
我有一个订单表格,我在其中使用 jQuery 计算插件来汇总总数。 此求和工作正常,但生成的“总和”存在问题。总之,我希望用逗号替换任何点。 代码的基础是; function ($this) {
我在使用 double 变量计算简单算术方程时遇到问题。 我有一个具有 double 属性 Value 的组件,我将此属性设置为 100。 然后我做一个简单的减法来检查这个值是否真的是 100: va
我在这里看到了一些关于 CRC 32 计算的其他问题。但没有一个让我满意,因此是这样。 openssl 库是否有任何用于计算 CRC32 的 api 支持?我已经在为 SHA1 使用 openssl,
当我在PHP日期计算中遇到问题时,我感到惊讶。 $add = '- 30 days'; echo date('Y-m-01', strtotime($add)); // result is 2017-
我正在使用 javascript 进行练习,我编写了这个脚本来计算 2 个变量的总和,然后在第三个方程中使用这个总和!关于如何完成这项工作的任何想法都将非常有用! First Number:
我有一个来自EAC的提示单和一个包含完整专辑的FLAC文件。 我正在尝试制作一些python脚本来播放文件,因为我需要能够设置在flac文件中开始的位置。 如何从CueSheet格式MM:SS:FF转
这个问题已经有答案了: Adding two numbers concatenates them instead of calculating the sum (24 个回答) 已关闭去年。 我有一个
4000 我需要上面字段 name="quantity" 和 id="price" 中的值,并使用 javascript 函数进行计算,并将其显示在字段 id= 中仅当我单击计算按钮时才显示“总
我是一名优秀的程序员,十分优秀!