为什么导致在这个Vue 3应用程序中无法将计算属性绑定为内联样式

Question

我正在使用Vue 3和Napster API开发音频播放器。

项目详细信息

玩家有一个进度条。我使用trackProgress计算属性实时更新进度：

<div class="progress-bar">
<span :style="{ width: trackProgress + '%' }"></span>
</div>

const musicApp = {
data() {
return {
player: new Audio(),
trackCount: 0,
tracks: [],
muted: false,
isPlaying: false
};
},
methods: {
async getTracks() {
try {
const response = await axios
.get(
"https://api.napster.com/v2.1/tracks/top?apikey=ZTk2YjY4MjMtMDAzYy00MTg4LWE2MjYtZDIzNjJmMmM0YTdm"
)
.catch((error) => {
console.log(error);
});
this.tracks = response;
this.tracks = response.data.tracks;
} catch (error) {
console.log(error);
}
},
nextTrack() {
if (this.trackCount < this.tracks.length - 1) {
this.trackCount++;
this.setPlayerSource();
this.playPause();
}
},
prevTrack() {
if (this.trackCount >= 1) {
this.trackCount--;
this.setPlayerSource();
this.playPause();
}
},
setPlayerSource() {
this.player.src = this.tracks[this.trackCount].previewURL;
},
playPause() {
if (this.player.paused) {
this.isPlaying = true;
this.player.play();
} else {
this.isPlaying = false;
this.player.pause();
}
},
toggleMute() {
this.player.muted = !this.player.muted;
this.muted = this.player.muted;
}
},
async created() {
await this.getTracks();
this.setPlayerSource();
this.player.addEventListener("ended", () => {
this.isPlaying = false;
});
},
computed: {
trackProgress() {
this.player.addEventListener("loadedmetadata", () => {
return (this.player.currentTime / this.player.duration) * 100;
});
}
}
};
Vue.createApp(musicApp).mount("#audioPlayer");

html,
body {
margin: 0;
padding: 0;
font-size: 16px;
}
body * {
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.player-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #2998ff;
background-image: linear-gradient(62deg, #2998ff 0%, #5966eb 100%);
}
#audioPlayer {
width: 300px;
height: 300px;
border-radius: 8px;
position: relative;
overflow: hidden;
background-color: #00ca81;
background-image: linear-gradient(160deg, #00ca81 0%, #ffffff 100%);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
display: flex;
flex-direction: column;
align-items: center;
}
.volume {
color: #ff0057;
opacity: 0.9;
display: inline-block;
width: 20px;
font-size: 20px;
position: absolute;
top: 5px;
right: 6px;
cursor: pointer;
}
.album {
width: 100%;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.album-items {
padding: 0 10px;
text-align: center;
}
.cover {
width: 150px;
height: 150px;
margin: auto;
box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.17);
border-radius: 50%;
background: url("https://w7.pngwing.com/pngs/710/955/png-transparent-vinyl-record-artwork-phonograph-record-compact-disc-lp-record-disc-jockey-symbol-miscellaneous-classical-music-sound.png") center top transparent;
background-size: cover;
}
.cover.spinning {
webkit-animation: spin 6s linear infinite;
/* Safari */
animation: spin 6s linear infinite;
}
.info {
width: 100%;
padding-top: 5px;
color: #000;
opacity: 0.85;
}
.info h1 {
font-size: 11px;
margin: 5px 0 0 0;
}
.info h2 {
font-size: 10px;
margin: 3px 0 0 0;
}
.to-bottom {
width: 100%;
margin-top: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.progress-bar {
background-color: #ff0057;
opacity: 0.9;
height: 3px;
width: 100%;
}
.progress-bar span {
display: block;
height: 3px;
width: 0;
background: rgba(255, 255, 255, 0.4);
}
.controls {
width: 150px;
display: flex;
height: 60px;
justify-content: space-between;
align-items: center;
}
.controls .navigate {
display: flex;
box-shadow: 1px 2px 7px 2px rgba(0, 0, 0, 0.09);
width: 33px;
height: 33px;
line-height: 1;
color: #ff0057;
cursor: pointer;
background: #fff;
opacity: 0.9;
border-radius: 50%;
text-align: center;
justify-content: center;
align-items: center;
}
.controls .navigate.disabled {
pointer-events: none;
color: #606060;
background-color: #f7f7f7;
}
.controls .navigate.navigate-play {
width: 38px;
height: 38px;
}
.navigate-play .fa-play {
margin-left: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://unpkg.com/axios@0.22.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet">
<div class="player-container">
<div id="audioPlayer">
<span class="volume" @click="toggleMute">
<i v-show="!muted" class="fa fa-volume-up"></i>
<i v-show="muted" class="fa fa-volume-off"></i>
</span>
<div class="album">
<div class="album-items">
<div class="cover" :class="{'spinning' : isPlaying}"></div>
<div class="info">
<h1>{{tracks[trackCount].name}}</h1>
<h2>{{tracks[trackCount].artistName}}</h2>
</div>
</div>
</div>
<div class="to-bottom">
<div class="progress-bar">
<span :style="{ width: trackProgress + '%' }"></span>
</div>
<div class="controls">
<div class="navigate navigate-prev" :class="{'disabled' : trackCount == 0}" @click="prevTrack">
<i class="fa fa-step-backward"></i>
</div>
<div class="navigate navigate-play" @click="playPause">
<i v-show="!isPlaying" class="fa fa-play"></i>
<i v-show="isPlaying" class="fa fa-pause"></i>
</div>
<div class="navigate navigate-next" :class="{'disabled' : trackCount == tracks.length - 1}" @click="nextTrack">
<i class="fa fa-step-forward"></i>
</div>
</div>
</div>
</div>
</div>

问题

由于我无法理解的原因，样式没有绑定到progress-bar内的span元素。

我错过了什么

---

更新

在创建的钩子中使用setInterval是有效的，但我宁愿避免它？

this.player.addEventListener("loadedmetadata", () => {
setInterval(() => {
this.trackProgress =
(this.player.currentTime / this.player.duration) * 100;
}, 100);
});

还有什么更好的选择

Answer 1

解决方案过程描述：

1. 为玩家的timeupdate事件设置监听器
2. timeupdate激发时更新组件的data
3. 使用percentageProgress计算的属性来计算进度，并在模板中使用该属性。(您仍然可以使用trackProgress属性，但percentageProgress在语义上更清晰一些。(

实现：

data() {
return {
player: new Audio(),
trackCount: 0,
tracks: [],
muted: false,
isPlaying: false,
currentTime: 0
};
},
computed: {
percentageProgress() {
return (this.currentTime / this.player.duration) * 100;
}
}
created() {
this.player.addEventListener("timeupdate", () => {
this.currentTime = this.player.currentTime;
});
}

另一方面，计算getter必须返回一个值。您的计算属性没有返回任何内容。

Answer 2

您应该创建一个数据属性trackProgress，并在created((钩子中创建的侦听器中更新它(类似于结束的事件(。

Answer 3

您一直在计算属性中添加事件侦听器，这根本没有意义。

此外，这些监听器会返回您想要的值，但它们只是进入了数字天堂，因为当事件发生时，没有人可以获取返回值并对其进行处理。

在data()模型中添加trackProgress属性，而不是计算属性，并将事件侦听器的添加移动到mounted部分，因此只添加一次。

然后，该侦听器将更新您的模型属性trackProgress。

data() { return {
player: new Audio(),
trackCount: 0,
tracks: [],
muted: false,
isPlaying: false,
trackProgress: 0,
} }

和

mounted: function () {
this.player.addEventListener("timeupdate", () => {
this.trackProgress = (this.player.currentTime / this.player.duration) * 100;
});
}