我有这个函数，应该在向服务器发送请求之前和之后向父组件发出更新。 我正在使用 Vue 来运行前端。 这是我遇到问题的功能：
saveUpdates: async function () {
const component = {
doc: {
specifications: this.edit_specs_buffer
},
component_id: this.id
}
this.req.upsertRecord('Components', component)
this.$emit('toggleLoaded', false) // Does Execute // Does Execute
const resp = await this.req.sendRequest(window.origin) // Does Execute
this.$emit('refreshParent', true) // Does NOT Execute (This is broken)
const createToast = this.$root.createToast // Does Execute
resp.messages.flash.forEach(message => { // Does Execute
createToast(message) // Does Execute
})
// Everything else works
if (resp.status !== 201) {
return false
}
this.req = new CustomRequest(this.$cookies.get('session'))
return true
},
在await
this.req.sendRequestthis.$emitrefreshParentthis.$emitsendRequest作为额外参考，这里是父组件中的子组件：
<SpecificationsComponent
:key="specs_key"
:doc="component_data.doc"
:spectype="'component'"
:name="get_component_primary_name(component_data)"
:id="component_data.component_id"
v-on:edit-specs="(e) => edit_specs = e"
v-on:toggle-loaded="toggleLoaded"
v-on:refresh-parent="refreshParent"
></SpecificationsComponent>
methods: {
toggleLoaded: function (val) {
this.loaded = val
},
refreshParent: function (val) {
console.log('refreshing parent')
console.log(val)
// this is a fetch request that is suposed to fire after the
// sendRequest finishes making changes to the server to update the
// page with the most recent information.
this.getComponentData()
},
最让我困惑的是
this.$rootthis.$emitpackage.json
"dependencies": {
"@babel/polyfill": "7.12.1",
"@dagrejs/dagre": "1.1.2",
"@popperjs/core": "^2.11.8",
"@vue-flow/background": "1.3.0",
"@vue-flow/controls": "1.1.1",
"@vue-flow/core": "1.36.0",
"@vue-flow/minimap": "1.4.0",
"@vue-flow/node-resizer": "1.3.6",
"@vue-flow/node-toolbar": "1.1.0",
"@vue/cli": "5.0.8",
"@vue/compat": "3.4.30",
"@vuelidate/core": "2.0.3",
"@vuelidate/validators": "2.0.4",
"bootstrap-vue": "npm:@ankurk91/bootstrap-vue@^3.0.2",
"chartjs": "0.3.24",
"core-js": "3.32.1",
"jquery": "3.7.1",
"lodash": "^4.17.21",
"mutationobserver-shim": "0.3.7",
"popper.js": "1.16.1",
"portal-vue": "2.1.7",
"vue": "3.4.26",
"vue-barcode-reader": "1.0.3",
"vue-chartjs": "5.3.1",
"vue-cookies": "1.8.3",
"vue-qr-generator": "3.0.1",
"vue-router": "4.3.2",
"vue-select": "3.20.3",
"vue3-easy-data-table": "1.5.47"
},
我试图弄清楚我调用和使用异步函数的方式是否有问题。 经过一段时间的摆弄后，我意识到所有这些异步调用都必须正常工作，因为我能够看到来自服务器的 201 响应，表明
sendRequest*编辑
这是
sendRequestasync sendRequest (origin) {
const fetchRequest = origin + '/api/v1/submit'
// eslint-disable-next-line
console.log(
'PUT ' + fetchRequest
)
const response = await fetch(fetchRequest, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify(this.compileRequest())
})
if (response.status === 201) {
// eslint-disable-next-line
console.log('Request successful')
} else {
// eslint-disable-next-line
console.log('Request failed')
}
const data = await response.json()
data.status = response.status
// eslint-disable-next-line
console.log(data)
return data
}
我不确定如何使其可重现。 这些 Vue 组件还有很多其他代码。 一切也都有点混乱。 如果您对此事有任何建议，我会采纳！
我想我终于解决了......有点。
非常感谢 Estus Flask 帮助我解决了这个问题。
不幸的是，我仍然不知道为什么我在我的代码中看到这个行为。 我通过调试器试图找出导致此问题的确切原因，但我一无所获。 在某些时候，我只是开始四处移动，绝望地尝试让它按照我想要的方式工作，不知何故我找到了解决方案。
saveUpdates: async function () {
const component = {
doc: {
specifications: this.edit_specs_buffer
},
component_id: this.id
}
this.req.upsertRecord('Components', component)
const resp = await this.req.sendRequest(window.origin)
this.$emit('toggleLoaded', false)
this.$emit('refreshParent')
const createToast = this.$root.createToast
resp.messages.flash.forEach(message => {
createToast(message)
})
// Everything else works
if (resp.status !== 201) {
return false
}
this.req = new CustomRequest(this.$cookies.get('session'))
return true
}
以这种方式排列代码给了我我想要的确切行为。单击“保存”按钮后，父组件将隐藏所有内容并显示加载屏幕，然后显示 toast 并显示成功消息，然后再次获取新的更新数据并在 get 请求完成后显示。