该代码用于使组件跳至页面顶部，但是在刷新后运行期间，该页面不再运行并给出错误，该项目位于nuxt和vue框架上。有谁知道这个问题的原因是什么，或者需要什么改变？
在nuxt固件之外，此代码运行良好，但在Framework中失败，在第一次刷新后，它不再起作用并给出错误!!!
错误文本：
TypeError：无法在字符串'bottom：30px; right：30px;'上创建属性'display'。
Vue.component('back-to-top', { template: '#backToTop', name: 'BackToTop', props: { text: { type: String, default: 'text' }, visibleoffset: { type: [String, Number], default: 600 }, right: { type: String, default: '30px', }, bottom: { type: String, default: '40px', }, }, data() { return { visible: false } }, mounted() { window.smoothscroll = () => { let currentScroll = document.documentElement.scrollTop || document.body.scrollTop if (currentScroll > 0) { window.requestAnimationFrame(window.smoothscroll) window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5))) } } window.addEventListener('scroll', this.catchScroll) }, destroyed() { window.removeEventListener('scroll', this.catchScroll) }, methods: { catchScroll() { this.visible = (window.pageYOffset > parseInt(this.visibleoffset)) }, backToTop() { window.smoothscroll() this.$emit('scrolled'); } } }) new Vue({ }).$mount('#app').back-to-top-fade-enter-active, .back-to-top-fade-leave-active { transition: opacity .7s; } .back-to-top-fade-enter, .back-to-top-fade-leave-to { opacity: 0; } .vue-back-to-top { position: fixed; z-index: 1000; cursor: pointer; } .vue-back-to-top .default { width: 160px; color: #ffffff; text-align: center; line-height: 30px; background-color: #f5c85c; border-radius: 3px; } .vue-back-to-top .default span { color: #ffffff; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - Backtotop Component</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <template id="backToTop"> <div> <transition name="back-to-top-fade"> <div class="vue-back-to-top" :style="`bottom:${this.bottom};right:${this.right};`" v-show="visible" @click="backToTop"> <slot> <div class="default"> <span> {{ text }} </span> </div> </slot> </div> </transition> </div> </template> <div id="app"> <back-to-top text="Back to top"></back-to-top> Lorem ipsum dolor sit amet consectetur adipisicing elit. In id libero fugit atque repudiandae cumque officiis, sapiente placeat? Quisquam aperiam quos quod hic natus officiis alias perferendis quibusdam in provident? Reprehenderit perferendis consequatur, neque magnam pariatur temporibus nemo corporis necessitatibus architecto itaque voluptatum unde suscipit a nihil quod nisi minima voluptate. Natus omnis quia est iusto modi quae asperiores vitae! Eaque, eos earum. Quod quas eum magnam corporis eos. Atque sunt impedit officia aperiam fugit beatae voluptates velit delectus fugiat nam qui, rerum perferendis ipsum, nulla recusandae nemo quas eligendi? Iste magnam ad mollitia et magni ratione aliquam fugiat alias deserunt temporibus exercitationem iusto quaerat doloremque eveniet, quo tempora delectus fugit eius odit. Repudiandae neque itaque doloribus delectus laboriosam deserunt. Accusamus omnis iste reiciendis? Autem voluptatibus nostrum illum ipsam sed animi molestias quis dignissimos, pariatur quisquam, consectetur mollitia rerum ut nesciunt aperiam vitae excepturi deleniti, aliquid alias qui? Debitis, similique. At corporis vero voluptates veritatis aliquid, nam quas dolores blanditiis quidem odit libero accusamus maiores a nobis distinctio mollitia eveniet, asperiores similique. Ut distinctio modi reiciendis, aperiam aspernatur nam vel. Cum molestiae, maiores distinctio inventore earum dolor veritatis eum laborum ab voluptates numquam perferendis adipisci sed dicta at fuga temporibus vero? Reiciendis eveniet iusto officia sint ab rerum! Sapiente, quas. Placeat, repudiandae, asperiores nostrum culpa illum, possimus saepe tenetur ea expedita harum in nemo explicabo. Quia sapiente beatae commodi libero enim distinctio asperiores reprehenderit dolores pariatur aliquam. Natus, molestiae accusamus. Earum dolores, ea pariatur eum sint iste, quibusdam perspiciatis necessitatibus nostrum quam eius voluptas mollitia, unde velit quia beatae doloribus totam ex omnis animi similique! Dolorum totam eum possimus quia. Aut perspiciatis, neque impedit, quasi exercitationem odio esse iusto explicabo quas quibusdam ex laboriosam labore, error eum veritatis et ratione unde delectus optio autem reiciendis nobis. Magni reiciendis ipsam earum! Vel similique commodi accusantium maxime modi debitis laboriosam. Cumque non sint consequuntur delectus ut. Quidem non incidunt tempore, impedit distinctio harum vero dicta doloribus dolorum perferendis ducimus qui quia at? Ad asperiores voluptate sit autem, voluptatibus odit dicta obcaecati impedit adipisci debitis aspernatur! Sit deserunt nesciunt fuga? Ipsum, vero. Animi, iste possimus consectetur non vel necessitatibus cum quo aspernatur mollitia. Dolores quae quisquam ad fugiat officiis, omnis, quia reprehenderit sed ipsum quas veritatis esse delectus error. Minus, necessitatibus saepe, doloremque non consequuntur esse eos sit, porro mollitia deleniti consequatur assumenda? Voluptatum earum sint aspernatur, dolore consequatur quas, ut eum est nesciunt iure voluptates blanditiis atque, repellat animi asperiores voluptatem aliquam autem. Repudiandae mollitia quam ab praesentium qui doloremque nihil velit! Accusamus tempora quos mollitia est explicabo, quia recusandae consectetur cupiditate! Temporibus inventore dignissimos totam repellat, eius porro quae neque, adipisci magni ab commodi quidem animi fuga dolores vel officia. Expedita? Beatae atque in incidunt assumenda tempore maiores eum libero ad explicabo eligendi molestias, provident autem totam velit laborum mollitia eius architecto adipisci culpa aperiam dolores praesentium esse minus sunt? Eos! Sit, pariatur? Quia eaque, quae animi amet repudiandae molestias nesciunt soluta eum inventore fugiat ipsam, repellat rerum rem perspiciatis? Ea suscipit temporibus officiis. Enim id fugiat laborum eius, quod totam? Deleniti nam magni officiis delectus, odio consequatur quam temporibus itaque sequi ex cupiditate molestias debitis est? Reprehenderit, ab! Ipsam iusto temporibus labore praesentium fuga deserunt cum modi distinctio ratione possimus. Recusandae animi, ex fugit voluptatibus obcaecati nesciunt, eligendi molestias voluptate sapiente, nulla pariatur. Enim et nisi sunt praesentium minima. Unde temporibus a eligendi doloribus. Ipsam repudiandae voluptatibus animi non optio! Molestiae dolorem consequuntur earum nemo consectetur dicta libero beatae, eos odio accusantium itaque, fuga tenetur quod eaque. Qui unde ab quos placeat debitis nemo fugiat, aliquam nam aperiam minus eveniet. Sunt aliquam, corrupti voluptate impedit tempore doloribus, repellendus consequuntur laborum quam non asperiores ex, at suscipit omnis tempora ipsa cum itaque iure dignissimos voluptas. Sapiente in corporis odio quisquam perferendis! Excepturi, voluptatem. Quas voluptatum eum hic quisquam itaque, aut ratione sapiente rem iste alias libero quaerat. Molestiae ab dignissimos dolores tempora, laudantium pariatur amet totam, delectus, debitis labore temporibus atque. Praesentium, aliquid unde necessitatibus placeat aspernatur error distinctio vitae sequi labore alias cumque enim sunt, quae quod suscipit quisquam quia a at provident, dolor qui aut consequuntur cupiditate. Officiis, fuga. Autem nisi quae laborum eveniet eligendi temporibus et soluta veniam laboriosam recusandae quia impedit fugiat praesentium unde maiores, nam facilis adipisci distinctio voluptatum. Accusantium perspiciatis dicta aut consectetur natus voluptatem? Nobis odit saepe molestias qui eius asperiores at aliquam natus soluta nam magnam, sed veritatis totam eaque beatae alias iusto! Facere cumque aliquid sit totam saepe accusantium nostrum porro culpa. Ducimus, expedita. Harum excepturi sapiente maxime perferendis, maiores consequatur eius corrupti sint facere atque sit magni aliquam possimus esse enim neque eaque deserunt aliquid amet voluptatum deleniti voluptatibus fuga quasi. Quos eaque temporibus omnis maxime officia quibusdam vel impedit. Possimus officiis ipsam numquam exercitationem, enim culpa sint illum, molestias a quidem consequatur delectus aperiam suscipit voluptas et velit hic! Optio. Reiciendis maxime impedit, excepturi illo ab dolorem et nemo voluptas dolores optio quo rerum magnam unde ullam facere doloribus commodi nam nostrum tempore. Amet deserunt molestiae tempore inventore, porro mollitia? Qui excepturi tenetur quia eius minima odio labore fuga quod, aliquid laudantium sequi iure? Asperiores reiciendis debitis commodi repudiandae nisi ab consequatur modi ipsa, id nemo voluptate aliquid sunt optio? Consequuntur impedit nobis provident quasi! Repellat et culpa consectetur praesentium iste, quisquam perferendis ratione facilis ex voluptatum commodi, fugiat quidem amet aut magni consequuntur a laboriosam adipisci vero impedit inventore. Illo quae iure repudiandae reiciendis perspiciatis, accusantium quas incidunt exercitationem saepe itaque voluptates hic cupiditate. Repellendus, earum labore alias adipisci asperiores minus corporis quo quas laudantium, odit sint corrupti dolore. Cum numquam quidem quae enim mollitia quisquam atque debitis libero accusantium ipsa eum nulla ad est maxime ducimus, corrupti exercitationem eos animi? Voluptates placeat, ipsa repellendus quidem quod dignissimos exercitationem? Consequuntur beatae molestias ab dolor vel aliquid tenetur rerum. Fugit tenetur excepturi voluptatum blanditiis quisquam fugiat. Deserunt cupiditate similique, dolorem adipisci commodi ad eaque quas, maxime debitis itaque repellat nam! Voluptates, ut? In, nobis iusto reprehenderit tempora voluptatibus earum quas neque alias, commodi, voluptate a. Error odio consequatur, sequi ratione dicta nam modi eos culpa? Accusamus voluptates repudiandae sunt a? Possimus omnis rem necessitatibus, enim eos quis quas ullam, suscipit odio nesciunt iure dolores voluptas architecto veniam voluptatibus nostrum, eum recusandae assumenda in? Corrupti, iure voluptas? Consequuntur accusantium similique atque? Dolores ipsum rem magnam at soluta nesciunt, debitis sint quidem ipsa adipisci distinctio, quas cupiditate fugiat ullam illum officia quo doloribus eveniet. Expedita quis iure nihil nulla incidunt. Perspiciatis, reiciendis. Dolorem architecto culpa accusantium maiores pariatur id tempora, sit iusto velit asperiores, enim nesciunt suscipit laboriosam rerum, officia sint numquam amet voluptates blanditiis iure in. Officiis, eveniet? Harum, natus perferendis. Aut temporibus quasi assumenda ab molestiae, omnis veritatis, laboriosam, dolore dolores voluptas corrupti quis adipisci. Dolore, quae blanditiis ducimus eaque impedit placeat quaerat nobis dolores enim voluptas quis sunt aperiam? Magni, animi quibusdam iusto cupiditate vero quia ipsum adipisci a facilis amet sed cumque ab architecto. Quis quibusdam omnis temporibus obcaecati itaque impedit blanditiis, repellat laborum ex doloremque culpa eveniet! Recusandae rerum aspernatur quae beatae aut obcaecati et, deleniti perspiciatis quibusdam, veniam dolore suscipit voluptatum aliquid tempore quod a iste dignissimos veritatis ipsa reiciendis modi velit culpa reprehenderit voluptate! Consectetur. Suscipit eum ducimus consequuntur architecto reprehenderit recusandae vitae cumque, commodi ipsam dolores maiores! Dolore, assumenda explicabo! Sit ipsam magni dicta aliquid similique quo praesentium debitis est, quos quaerat nesciunt quis? Dolores eaque voluptatem hic vitae asperiores necessitatibus recusandae, architecto officiis repellat unde, expedita sed itaque illo quidem! Quos ad tempora quod cumque veritatis minus error ducimus? Architecto eveniet laboriosam dolore? Id fugiat molestiae a sed assumenda eligendi, velit expedita possimus sequi ipsa tempore itaque fugit officia consequuntur deleniti praesentium doloremque nulla similique. Ipsum numquam suscipit, ut dolores voluptatibus accusantium aspernatur. Voluptas beatae tempore culpa temporibus aliquid accusamus esse, harum et debitis consectetur numquam hic eius odio non ducimus fugiat ut id labore, aspernatur reprehenderit! Quod voluptates id incidunt nulla voluptatum. Rem at soluta unde? Eveniet laborum cum magni iure vitae mollitia quibusdam! Odio libero distinctio maxime culpa, rerum laudantium, nam, expedita inventore doloremque ut dolorum adipisci non neque nostrum aperiam. Quos reiciendis ipsum itaque excepturi, eos provident, aspernatur cupiditate illo, incidunt natus iste consequatur. Officia officiis nisi corporis omnis neque. Neque quod vitae itaque impedit maxime aliquam ullam quisquam adipisci. Ad nemo nisi voluptate blanditiis, neque commodi alias iure maiores, magnam modi placeat praesentium quidem excepturi libero esse, perferendis cumque consectetur distinctio laboriosam dignissimos debitis fugiat! Cum sequi earum cumque? Debitis qui ea voluptatum maiores nobis dolorem dolores, blanditiis sunt voluptates fugit numquam tempora, quo dignissimos nostrum neque nesciunt sit nisi officiis voluptas velit? Beatae sunt magnam ratione voluptate. Dignissimos. Adipisci amet temporibus delectus corrupti sint minima incidunt, voluptas saepe veniam iusto voluptates hic itaque sapiente corporis blanditiis minus pariatur reprehenderit quod at? Reiciendis sit repellendus voluptas rem ratione? Eius. Placeat enim minus autem explicabo aperiam quos! Ullam vel nobis vitae dignissimos labore id cum officia aut excepturi eligendi facere sequi minus quasi, necessitatibus magni ad blanditiis harum aliquam laudantium! </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script> <script src="./script.js"></script> </body> </html>
该代码用于使组件跳至页面顶部，但是在刷新后运行期间，该页面不再运行并给出错误，该项目位于nuxt和vue框架上。有谁知道...
问题来自样式绑定，应类似于：
您可能应该更改您的
感谢用户@Boussadjra Brahim，要解决此问题，必须按如下所示更改代码：