Vue & Nuxt Js：为啥不能在字符串'bottom:30px;right:30px;'上创建属性'display'？
Posted
技术标签:
【中文标题】Vue & Nuxt Js：为啥不能在字符串\'bottom:30px;right:30px;\'上创建属性\'display\'？【英文标题】：Vue & Nuxt Js : why Cannot create property 'display' on string 'bottom:30px;right:30px;'?Vue & Nuxt Js：为什么不能在字符串'bottom:30px;right:30px;'上创建属性'display'？ 【发布时间】：2020-08-28 19:27:00 【问题描述】：这段代码是为了让一个组件跳转到页面顶部，但是在刷新页面后运行过程中页面不再运行并报错，这个项目是在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>【问题讨论】：
请分享错误。 @BeHappy 错误文本 = TypeError：无法在字符串“bottom:30px;right:30px;”上创建属性“display” 会在codesandbox中重现错误吗？ @BeHappy 亲爱的朋友，问题解决了，我把解决方案分别放在下面两个cmets中，谢谢:) 我很高兴听到这个消息。 【参考方案1】：问题来自样式绑定，应该是这样的：
:style="bottom:bottom,right:right"
【讨论】：
谢谢您和其他亲爱的朋友，您的建议已修复错误:) @coyotte508 是的，我知道这个 es6 功能，但我这样做是为了通过提及键/值来避免混淆 @coyotte508 你的说法也是正确的，没有任何问题:)【参考方案2】：你应该改变你的
:style="`bottom:$this.bottom;right:$this.right;`"
to :style='bottom, right'
我绝对不认为你可以在模板中使用$this.bottom，因为这已经被解释了
【讨论】：
在template中可以使用this
@BeHappy hum 没有以这种方式引用数据。您可能可以使用箭头函数来实现，但这并没有多大意义
谢谢你的回答，亲爱的朋友，你的建议是绝对正确的:)【参考方案3】：
感谢用户@Boussadjra Brahim，为了解决这个问题，代码必须修改如下：
:style="`bottom:$this.bottom;right:$this.right;`"
到这里：
:style="bottom:bottom,right:right"
简而言之：
:style="bottom,right"
感谢所有回复的朋友:)
【讨论】：
以上是关于Vue & Nuxt Js：为啥不能在字符串'bottom:30px;right:30px;'上创建属性'display'？的主要内容，如果未能解决你的问题，请参考以下文章
javascript nuxt.js项目中的Jest&vue-test-utils配置