我是 Vue 的新手，到目前为止我很喜欢单文件组件.
在制作我真正想做的东西之前，我想我会尝试一些小事情，看看我是否掌握了这个概念.
所以我开始制作一个带有进度条的用于打开 XMLHttpRequest 的组件.
<div v-if="showQ"><div class="text-muted"><span>{{humanReadableLead}}</span><span :class="'text-'+color">{{humanReadableMessage}}</span><span>{{humanReadableEnd}}</span><div class="progress">
<div class="text-right text-muted form-text text-small"><span class="float-left">{{xhrMessage}}</span>
</模板><脚本>从 './http-responses' 导入 {httpStatusCodes, httpReadyStateCodes}；导出默认{道具: {方法: {类型:字符串，默认值:获取"，验证器:函数(值){返回 ["GET", "POST", "PUT", "DELETE"].includes(value)}},网址:{类型:字符串，要求:真实},异步:{类型:布尔型，默认值:真},成功: {类型:功能，默认值:函数(){控制台日志(this.xhr.response)}},准备状态变化:{类型:功能，默认值:函数(事件){}},自动关闭Q:{类型:布尔型，默认值:假}},数据:函数(){返回 {xhr: 新的 XMLHttpRequest(),httpStatusCodes:httpStatusCodes,httpReadyStateCodes:httpReadyStateCodes,颜色:主要"，百分比:0，humanReadableLead: "",humanReadableMessage: "",humanReadableEnd: "",xhrMessage: "",showQ:真的，完整Q:假}},计算:{准备状态工具提示:函数(){var rs = this.xhr.readyState,rsc = httpReadyStateCodes[rs]返回`就绪状态 ${rs}: ${rsc}`},状态工具提示:函数(){var s = this.xhr.status//s = s == 0 ?218:秒var sc = httpStatusCodes[s]返回`状态${s}:${sc}`},转移完成:函数(){返回 this.completeQ}},方法: {打开:函数(){this.xhr.open(this.method, this.url, this.async)},发送:函数(){this.xhr.send()},再见:函数(){this.showQ = 假}},创建:函数(){var that = this那.open()that.xhr.addEventListener(错误"，函数(事件){that.color = "危险"that.xhrMessage = "发生错误."})this.xhr.addEventListener(进度"，函数(事件){如果(event.lengthComputable){var percentComplete = event.loaded/event.total * 100;that.percent = 完成百分比} 别的 {那.百分比 = 100that.xhrMessage = "由于总大小未知，无法计算进度信息."}})that.xhr.addEventListener(中止"，函数(事件){that.color = "危险"" that.xhrMessage = "用户已取消传输."});that.xhr.addEventListener(加载"，函数(事件){that.color = "成功"that.xhrMessage = "传输完成."that.completeQ = 真if (that.automaticCloseQ) { that.showQ = false }那.成功()})that.xhr.addEventListener("readystatechange", function(event) {that.readystatechange(事件)})那.发送()}}<样式范围></风格>
和index.html
用JS
var progress = new Vue({el: '#request',组件:{ httpRequest }})
而且效果很好...
但是，有一些小错误我一生都无法弄清楚:
- 我想定义一个函数
onSuccess 并将其传递给道具 success，但这会从 Vue 中引发错误 statusTooltip 的计算属性未更新- 无论我如何尝试绑定，尝试设置
automaticCloseQ 都会导致默认值
例如
var onSuccess = function() {console.log('here')}<http-request :url="'./<some-file>'" :success="onSuccess" :automaticCloseQ="true"/>
我错过了什么?
解决方案 希望这会有所帮助.
我想定义一个函数 onSuccess 并将其传递给 props success，但这会从 Vue 中引发错误
您正在 Vue 之外定义 onSuccess.它应该在Vue的methods
中定义statusTooltip 的计算属性没有更新
在 Javascript 中，对象是通过引用传递的.xhr 总是引用同一个对象.这就是计算值不会更新的原因.请参阅 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats .一种解决方法是使用另一个名为 xhrStatus 的反应性数据，并在 xhr 的事件侦听器中手动更新此状态.
无论我如何尝试绑定，尝试设置automaticCloseQ都会导致默认值
(我不知道这是什么意思...)
I am new to Vue and I am so far enjoying the Single File Components.
Prior to making what I really want to make, I figured I would try some small things to see if I grasp the concept.
So I set off to make a component for opening an XMLHttpRequest, with a progress bar.
<template >
<div v-if="showQ">
<div class="text-muted">
<span>{{humanReadableLead}}</span>
<span :class="'text-'+color">{{humanReadableMessage}}</span>
<span>{{humanReadableEnd}}</span>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
:class="'bg-'+color"
role="progressbar"
:style="{width: String(percent)+'%'}"
:aria-valuenow="percent"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="text-right text-muted form-text text-small">
<span class="float-left">{{xhrMessage}}</span>
<span
class="badge"
:class="'badge-'+color"
data-toggle="tooltip"
data-placement="right"
:title="readyStateTooltip"
>
{{xhr.readyState}}
</span>
<span
class="badge"
:class="'badge-'+color"
data-toggle="tooltip"
data-placement="right"
:title="statusTooltip"
>
{{xhr.status}}
</span>
<span
v-if="transferComplete"
@click="goodbye"
class="badge badge-secondary"
data-toggle="tooltip"
data-placement="right"
title="Dismiss progress bar"
>
×
</span>
</div>
</div>
</template>
<script>
import {httpStatusCodes, httpReadyStateCodes} from './http-responses';
export default {
props: {
method: {
type: String,
default: "GET",
validator: function(value) {
return ["GET", "POST", "PUT", "DELETE"].includes(value)
}
},
url: {
type: String,
required: true
},
async: {
type: Boolean,
default: true
},
success: {
type: Function,
default: function() {
console.log(this.xhr.response)
}
},
readystatechange: {
type: Function,
default: function(event) {
}
},
automaticCloseQ: {
type: Boolean,
default: false
}
},
data: function() {
return {
xhr: new XMLHttpRequest(),
httpStatusCodes:httpStatusCodes,
httpReadyStateCodes:httpReadyStateCodes,
color: "primary",
percent: 0,
humanReadableLead: "",
humanReadableMessage: "",
humanReadableEnd: "",
xhrMessage: "",
showQ: true,
completeQ: false
}
},
computed: {
readyStateTooltip: function() {
var rs = this.xhr.readyState,
rsc = httpReadyStateCodes[rs]
return `Ready state ${rs}: ${rsc}`
},
statusTooltip: function() {
var s = this.xhr.status
// s = s == 0 ? 218 : s
var sc = httpStatusCodes[s]
return `Status ${s}: ${sc}`
},
transferComplete: function() {
return this.completeQ
}
},
methods: {
open: function() {
this.xhr.open(this.method, this.url, this.async)
},
send: function() {
this.xhr.send()
},
goodbye: function() {
this.showQ = false
}
},
created: function() {
var that = this
that.open()
that.xhr.addEventListener("error", function(event) {
that.color = "danger"
that.xhrMessage = "An error has occured."
})
this.xhr.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
that.percent = percentComplete
} else {
that.percent = 100
that.xhrMessage = "Unable to compute progress information since the total size is unknown."
}
})
that.xhr.addEventListener("abort", function(event) {
that.color = "danger"
that.xhrMessage = "The transfer has been canceled by the user."
});
that.xhr.addEventListener("load", function(event) {
that.color = "success"
that.xhrMessage = "Transfer complete."
that.completeQ = true
if (that.automaticCloseQ) { that.showQ = false }
that.success()
})
that.xhr.addEventListener("readystatechange", function(event) {
that.readystatechange(event)
})
that.send()
}
}
</script>
<style scoped>
</style>
and in index.html
<div id="request" style="width:50%;" >
<http-request :url="'./<some-file>'"/>
</div>
with JS
var progress = new Vue({
el: '#request',
components: { httpRequest }
})
and this works fairly nicely...
However, there are a few small bugs that for the life of me I can not figure out:
- I would like to define a function
onSuccess that I pass to the prop success, but this throws an error from Vue - the computed properties for
statusTooltip does not get updated - trying to set
automaticCloseQ results in the default value no matter how I try to bind
e.g.
var onSuccess = function() {console.log('here')}
<http-request :url="'./<some-file>'" :success="onSuccess" :automaticCloseQ="true"/>
what am I missing?
解决方案 Hope this helps.
I would like to define a function onSuccess that I pass to the prop success, but this throws an error from Vue
You are defining onSuccess outside of Vue. It should be defined in Vue's methods
the computed properties for statusTooltip does not get updated
In Javascript, an object is passed by reference. xhr always reference the same object. That's why the computed value won't update. See https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats . 1 way to solve it is to have another reactive data called xhrStatus and update this status manually in the xhr's event listeners.
trying to set automaticCloseQ results in the default value no matter how I try to bind
(I dunno what this means...)
这篇关于Vue2:将函数作为道具传递会触发道具已设置的警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-13 04:44