在 DOM 内容完全加载之前呈现 VueJS 事件处理程序?
VueJS event handlers being rendered before DOM content is completely loaded?
我正在构建一个 Vuejs 应用程序,因此我将 @mousemove
指令与 Vue-blotter 结合使用。下面,在 "Interaction example" 部分下,我找到了一些用于操作 <Vue-blotter/>
组件属性的基本代码。因此,通过一点点重构,我将它添加到我的项目中,并将示例中找到的 scope.material.uniforms.uSpeed.value = (e.x + e.y) / 4500
更改为 scope.material.uniforms.uSeed.value = (e.x + e.y) / 2000
也是一个有效的 属性,稍后将显示。问题是,如果我在页面完全加载之前移动光标,控制台将显示此错误:
Error in v-on handler: "TypeError: undefined is not an object (evaluating 'scope.material.uniforms.uSeed')"
即使我在页面完全加载后移动鼠标,也会停止输出此错误。我正在使用 Vue-router
,这是我的主视图的样子:
<template>
<div class="home">
<div class="contact"><a target="_blank" href="https://www.instagram.com/ammarr_yasserr/">Instagram</a><a target="_blank" href="mailto://ammaryasser6.2006@gmail.com">Email</a></div>
<vue-blotter
material-type= "LiquidDistortMaterial"
text= "Portfolio"
fill= "#EAEBED"
family= "-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
:paddingRight= "10"
:paddingLeft= "10"
:weight= "700"
:uniforms= "{
uSpeed: 0.1,
uVolatility: 0.03,
uSeed: 20
}">
<div class="hero" slot-scope="{ blotterScope }" @mousemove="(e) => mouseMove(e, blotterScope)">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem molestiae delectus, consequuntur ad iusto quis ab, natus nisi reiciendis reprehenderit est voluptatum praesentium voluptates nostrum tempore, veritatis repudiandae similique saepe?</p></span>
</div>
</vue-blotter>
</div>
</template>
<script>
import '@/assets/stylesheets/Home.sass'
import VueBlotter from 'vue-blotter'
// import gsap from 'gsap'
export default {
name: 'Home',
data () {
return {
age: null
}
},
components: { VueBlotter },
created () {
const birthday = new Date(2006, 1, 8)
const ageDifMs = Date.now() - birthday.getTime()
const ageDate = new Date(ageDifMs)
this.age = Math.abs(ageDate.getUTCFullYear() - 1970)
},
methods: {
mouseMove: (e, scope) => {
scope.material.uniforms.uSeed.value = (e.x + e.y) / 2000
}
}
}
</script>
尝试更改这些行
@mousemove="(e) => mouseMove(e, blotterScope)"
mouseMove: (e, scope) => {
分别给这些。
@mousemove="mouseMove(blotterScope, $event)"
mouseMove: (scope, e) => {
此外,e.x
可能应该类似于 e.target.x
或 e.currentTarget.x
。
如果这解决了您的错误,请告诉我。
您可以在对该对象执行某些操作之前添加对该对象是否存在的检查。
可能是这样的
let scope = scope || {};
scope.material = scope.material || {};
scope.material.uniforms = scope.materia.uniforms || {};
scope.material.uniforms.uSeed = scope.material.uniforms.uSeed || {}
我正在构建一个 Vuejs 应用程序,因此我将 @mousemove
指令与 Vue-blotter 结合使用。下面,在 "Interaction example" 部分下,我找到了一些用于操作 <Vue-blotter/>
组件属性的基本代码。因此,通过一点点重构,我将它添加到我的项目中,并将示例中找到的 scope.material.uniforms.uSpeed.value = (e.x + e.y) / 4500
更改为 scope.material.uniforms.uSeed.value = (e.x + e.y) / 2000
也是一个有效的 属性,稍后将显示。问题是,如果我在页面完全加载之前移动光标,控制台将显示此错误:
Error in v-on handler: "TypeError: undefined is not an object (evaluating 'scope.material.uniforms.uSeed')"
即使我在页面完全加载后移动鼠标,也会停止输出此错误。我正在使用 Vue-router
,这是我的主视图的样子:
<template>
<div class="home">
<div class="contact"><a target="_blank" href="https://www.instagram.com/ammarr_yasserr/">Instagram</a><a target="_blank" href="mailto://ammaryasser6.2006@gmail.com">Email</a></div>
<vue-blotter
material-type= "LiquidDistortMaterial"
text= "Portfolio"
fill= "#EAEBED"
family= "-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
:paddingRight= "10"
:paddingLeft= "10"
:weight= "700"
:uniforms= "{
uSpeed: 0.1,
uVolatility: 0.03,
uSeed: 20
}">
<div class="hero" slot-scope="{ blotterScope }" @mousemove="(e) => mouseMove(e, blotterScope)">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem molestiae delectus, consequuntur ad iusto quis ab, natus nisi reiciendis reprehenderit est voluptatum praesentium voluptates nostrum tempore, veritatis repudiandae similique saepe?</p></span>
</div>
</vue-blotter>
</div>
</template>
<script>
import '@/assets/stylesheets/Home.sass'
import VueBlotter from 'vue-blotter'
// import gsap from 'gsap'
export default {
name: 'Home',
data () {
return {
age: null
}
},
components: { VueBlotter },
created () {
const birthday = new Date(2006, 1, 8)
const ageDifMs = Date.now() - birthday.getTime()
const ageDate = new Date(ageDifMs)
this.age = Math.abs(ageDate.getUTCFullYear() - 1970)
},
methods: {
mouseMove: (e, scope) => {
scope.material.uniforms.uSeed.value = (e.x + e.y) / 2000
}
}
}
</script>
尝试更改这些行
@mousemove="(e) => mouseMove(e, blotterScope)"
mouseMove: (e, scope) => {
分别给这些。
@mousemove="mouseMove(blotterScope, $event)"
mouseMove: (scope, e) => {
此外,e.x
可能应该类似于 e.target.x
或 e.currentTarget.x
。
如果这解决了您的错误,请告诉我。
您可以在对该对象执行某些操作之前添加对该对象是否存在的检查。
可能是这样的
let scope = scope || {};
scope.material = scope.material || {};
scope.material.uniforms = scope.materia.uniforms || {};
scope.material.uniforms.uSeed = scope.material.uniforms.uSeed || {}