Vue project encounters disappeared DOM element

Question

Vue project encounters disappeared DOM element

I'm currently developing a code typer, but I've encountered an issue where the element inexplicably turns into Null. Despite having some experience with Vue from my previous project on Django/Python at (live preview), I find myself struggling to pinpoint the cause.

My assumption is that it's related to how Vue handles rendering, but as a beginner in Vue, I feel lost and unsure of where to start troubleshooting this problem.

Here is the code snippet:

  var codeBlock = document.getElementById('code')
  console.log(codeBlock)
  setTimeout(() => {

    new TypeIt(codeBlock, {
      strings: [codeSample],
      speed: 20
    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
    document.getElementById('real-code').innerHTML = code;
  }, 10);

If we check the console, we can observe that on line 23, the codeBlock variable is not null. However, when attempting to use it, it suddenly becomes null. Can you identify anything unusual? https://i.sstatic.net/cm9ku.png

Full Component:

<template>
  <div id="code-block" class="bb">
    <pre class="code-pre">
    <code id="real-code"></code>
  </pre>

    <div id="code" class="language-py"></div>
  </div>

</template>

<script>
  import 'prismjs'
  import 'prismjs/themes/prism.css'
  import TypeIt from 'typeit';

  export default {
    name: 'CodeTyper'
  }

  var codeSample = '\x0a\x3E\x3E\x20\x6E\x61\x6E\x6F\x20\x63\x6F\x64\x65\x73\x70\x65\x6E\x74\x2E\x70\x79\x0A\x66\x72\x6F\x6D\x20\x70\x79\x74\x68\x6F\x6E\x20\x69\x6D\x70\x6F\x72\x74\x20\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x0A\x66\x72\x6F\x6D\x20\x70\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x2E\x6D\x6F\x64\x65\x6C\x73\x20\x69\x6D\x70\x6F\x72\x74\x20\x50\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x0A\x0A\x63\x6C\x61\x73\x73\x20\x43\x6F\x64\x65\x53\x70\x65\x6E\x74\x28\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x29\x3A\x0A\x20\x20\x20\x20\x6E\x61\x6D\x65\x20\x3D\x20\x27\x50\x61\x74\x72\x69\x63\x6B\x20\x48\x61\x6E\x66\x6F\x72\x64\x27\x0A\x20\x20\x20\x20\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x20\x20\x3D\x20\x27\x50\x69\x74\x74\x73\x62\x75\x72\x67\x68\x2C\x20\x50\x41\x2C\x20\x55\x53\x27\x0A\x20\x20\x20\x20\x6C\x61\x6E\x67\x75\x61\x67\x65\x73\x20\x3D\x20\x5B\x27\x70\x79\x74\x68\x6F\x6E\x27\x2C\x20\x27\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x27\x2C\x20\x27\x63\x73\x73\x27\x2C\x27\x68\x74\x6D\x6C\x35\x27\x5D\x0A\x20\x20\x20\x20\x66\x61\x76\x6F\x72\x69\x74\x65\x73\x20\x3D\x20\x5B\x27\x64\x6A\x61\x6E\x67\x6F\x27\x2C\x20\x27\x74\x65\x6E\x73\x6F\x72\x66\x6C\x6F\x77\x27\x2C\x20\x27\x74\x77\x69\x74\x63\x68\x27\x2C\x20\x27\x64\x69\x73\x63\x6F\x72\x64\x27\x2C\x20\x27\x6F\x70\x65\x6E\x63\x76\x27\x5D\x0A\x0A\x20\x20\x20\x20\x64\x65\x66\x20\x5F\x5F\x73\x74\x72\x5F\x5F\x28\x73\x65\x6C\x66\x29\x3A\x0A\x20\x20\x20\x20\x20\x20\x72\x65\x74\x75\x72\x6E\x20\x73\x65\x6C\x66\x2E\x6E\x61\x6D\x65'
  var codeBlock = document.getElementById('code')
  console.log(codeBlock)
  setTimeout(() => {

    new TypeIt(codeBlock, {
      strings: [codeSample],
      speed: 20
    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
    document.getElementById('real-code').innerHTML = code;
  }, 10);


</script>

<style>
  #real-code {
    color: #5c5edc;
  }

  #code-block {
  background-color: #141D22;
  color: #fff;
  flex: 1;
  height: 355px;
}

#code-block-sub {
  background-color: rgb(34, 32, 35);
  color: #fff;
  width: 100%;
  padding: 0 15px;
  height: 150px;
}

#code,
#code-sub {
  padding: 0px !important;
  margin: 0px !important;
  display: none;
  color: #fff !important;
}


</style>

javascript vue.js

Answer 1

Answer №1

Initially, we have a template showcasing a portion of the string...

<template>
  <div>
    <pre>{{partialCode}}</pre>
    <v-btn @click="startAppending()"></v-btn>
  </div>
</template>

This is followed by the partialCode string being linked to data...

export default {
  data () {
    return {
      partialCode: '',
      // other data
    }
  },

You might want to commence appending during onCreate or any other lifecycle hook (or once you asynchronously receive the code data), but the main concept here is that you can simply modify the state of partialCode and let the DOM update on its own...

methods: {
    startAppending() {
      this.partialCode = ''  // starting fresh each time
      const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python')
      let index = 0
      let interval = setInterval(() => {
        if (this.partialCode.length === code.length) {
          clearInterval(interval)
        } else {
          this.partialCode = code.slice(0, index++)
        }
      }, 200);
    },
    // additional methods
  }

Answer 2

Initially, we have a template showcasing a portion of the string...

<template>
  <div>
    <pre>{{partialCode}}</pre>
    <v-btn @click="startAppending()"></v-btn>
  </div>
</template>

This is followed by the partialCode string being linked to data...

export default {
  data () {
    return {
      partialCode: '',
      // other data
    }
  },

You might want to commence appending during onCreate or any other lifecycle hook (or once you asynchronously receive the code data), but the main concept here is that you can simply modify the state of partialCode and let the DOM update on its own...

methods: {
    startAppending() {
      this.partialCode = ''  // starting fresh each time
      const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python')
      let index = 0
      let interval = setInterval(() => {
        if (this.partialCode.length === code.length) {
          clearInterval(interval)
        } else {
          this.partialCode = code.slice(0, index++)
        }
      }, 200);
    },
    // additional methods
  }

Vue project encounters disappeared DOM element

Answer №1

Similar questions

How can you animate the background of a website using AngularJS - CSS or JavaScript?

What is the best way to combine the elements of two arrays within a v-for loop?

Tips for showing user data following form submission to a SQL database using React JS

Is there a way to change the color of a row in react jsx based on a condition from another row?

Error in hook order occurs when rendering various components

Issue with dropdown not toggling open when using focus and focusout events

What methods are available for implementing hover effects within attributes using a JavaScript object?

The ngOnInit function is not triggered upon instantiation of an Injectable class

The issue of Access-Control-Allow-Origin restriction arises specifically when using the gmap elevation API

Dealing with AngularJS memory leaks caused by jQuery

Ajax-powered Datatables

Timeout for jQuery animations

What is the best way to refresh a page with AngularJS?

Encountering a connection error while running a Node.js Selenium test case on Chrome. The specific error message received is: "Error: ECONNREFUSED - Connection refused to 127.0

Omit words from list in a route in Express.js

Access a SQL database to retrieve a data value and seamlessly integrate it into an HTML document with the help of node

Ways to incorporate a scroll feature and display an iframe using JQuery

Having trouble setting up Strongloop for Loopback v.3 on macOS Catalina?

How to trigger a JavaScript function when the UI-Router state is switched?

Using Vue.js to transform a map filter into a variable