[英]How to get data from axios call in computed method to manipulate them?
我用 axios 打电话来获取这样的数据:
export default {
name: 'TaxesSection',
data () {
return {
isFormShown: false,
isLoading: false,
isOpen: false,
info: null,
dist: null,
tableauDistance: [],
tableauGeneral: {},
tabName: [],
tabProrataDist: [],
tabPriceHt: [],
voyages: {},
id: null,
amount: null,
errors: []
}
},
// Fetches posts when the component is created.
async created() {
try {
const response = await axios.get(`/cruise/${this.cruise.id}/vat_info`)
this.info = response.data
} catch (e) {
this.errors.push(e)
}
},
props: ['agreementId'],
computed: {
getTotalDistance () {
return this.info
},
当我通过调用{{getTotalDistance}}
在 HTML 中显示数据时,我得到了这个:
{ "disembs_vat": [ { "profile": { "address_country": { "iso": "FR", "name": "France" }, "company_name": null, "company_reg_country": null, "date_of_birth": null, "full_name": "Paul Sernine", "id": 3, "initials": "PS", "is_new": false, "locked": false, "passport_country": { "iso": "FR", "name": "France" }, "profile_name": "Alt Profile #1", "version": 0, "write_access": true }, "voyages": [ { "country": "FRA", "distance": 15.916673872587964, "vat": 0.1 }, { "country": "international", "distance": 80.3050348237542, "vat": 0 }, { "country": "COR", "distance": 18.244668116382755, "vat": 0.021 } ] }, { "profile": { "address_country": null, "company_name": null, "company_reg_country": null, "date_of_birth": null, "full_name": "Robert Neverconnected", "id": 9, "initials": "RN", "is_new": false, "locked": false, "passport_country": null, "profile_name": null, "version": 0, "write_access": true }, "voyages": [ { "country": "FRA", "distance": 9.13255133078821, "vat": 0.1 } ] }, { "profile": { "address_country": null, "company_name": null, "company_reg_country": null, "date_of_birth": null, "full_name": "test ttete", "id": 11, "initials": "tt", "is_new": false, "locked": false, "passport_country": null, "profile_name": "Created by Arsène Lupin", "version": 0, "write_access": true }, "voyages": [ { "country": "international", "distance": 1001.8276448564677, "vat": 0 } ] } ], "qualifying_voyages": [ { "end_wp_id": 23, "qualifying": false, "start_wp_id": 1 }, { "end_wp_id": 26, "qualifying": true, "start_wp_id": 23 }, { "end_wp_id": 32, "qualifying": true, "start_wp_id": 26 } ], "total_distance": 1125.4265729999809, "vat_prorata": [ { "distance": 25.049225203376174, "vat": 0.1 }, { "distance": 1082.1326796802218, "vat": 0 }, { "distance": 18.244668116382755, "vat": 0.021 } ] }
但是我想操作计算函数“getTotalDistance”上的数据,当我尝试return this.info.disembs_vat
或操作数据时,我得到了这个错误:
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of null (reading 'disembs_vat')
at VueComponent.getTotalDistance (TaxesSection.vue?b2b5:43:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597:1)
at VueComponent.computedGetter [as getTotalDistance] (vue.runtime.esm.js?2b0e:4851:1)
at Object.get (vue.runtime.esm.js?2b0e:2081:1)
at Proxy.render (TaxesSection.vue?ec96:7:1)
at Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
而且我想不通...当我通过修改某些内容重新加载html并保存它时,但是当我用F5重新加载页面时它没有。
非常感谢!
在您的请求返回(并填充this.info
)之前, this.info
为null
。
该错误告诉您null
没有disembs_vat
属性。 这是真的。
当item
不是 falsy 时使用可选链接返回 this.item.disembs_vat 的值,当item
是this.item.disembs_vat
时返回undefined
:
<script>
export default {
// ...
computed: {
vat() {
return this.item?.disembs_vat
}
}
// ...
}
</script>
<template>
<pre v-text="{ vat }" />
</template>
如果您不希望在项目为null
时undefined
,请提供如下默认值:
this.item?.disembs_vat || 'default value here'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.