在完全加载 DOM 内容之前渲染 VueJS 事件处理程序？答案

【问题标题】：VueJS event handlers being rendered before DOM content is completely loaded?在完全加载 DOM 内容之前渲染 VueJS 事件处理程序？
【发布时间】：2020-09-22 17:35:22
【问题描述】：

我正在构建一个 Vuejs 应用程序，因此我将 @mousemove 指令与 Vue-blotter 结合使用。下面，在“交互示例”部分下，我找到了一些用于操作<Vue-blotter/> 组件属性的基本代码。因此，通过微小的重构，我将它添加到我的项目中，并将示例中的scope.material.uniforms.uSpeed.value = (e.x + e.y) / 4500 更改为scope.material.uniforms.uSeed.value = (e.x + e.y) / 2000，这也是一个有效属性，稍后将显示。问题是如果我在页面完全加载之前移动光标，控制台会显示这个错误：

v-on 处理程序中的错误：“TypeError: undefined is not an object (evalating '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>

【问题讨论】：

标签： javascript vuejs2 vue-component mousemove virtual-dom

【解决方案1】：

您可以在对它做某事之前添加对该对象是否存在的检查。

可能是这样的

let scope = scope || {};
scope.material = scope.material || {};
scope.material.uniforms = scope.materia.uniforms || {};
scope.material.uniforms.uSeed = scope.material.uniforms.uSeed || {}

【讨论】：

谢谢伙计，这非常有效。只需将let scope 更改为let s 即可！
@AmmarSarhan 很高兴我帮助了你。

【解决方案2】：

尝试更改这些行

@mousemove="(e) => mouseMove(e, blotterScope)"

mouseMove: (e, scope) => {

分别给这些。

@mousemove="mouseMove(blotterScope, $event)"

mouseMove: (scope, e) => {

另外，e.x 应该类似于e.target.x 或e.currentTarget.x。

如果这能解决您的错误，请告诉我。

【讨论】：

不幸的是，运气不好。还是同样的错误，感谢您的努力！