Dynamic content in Vue components

Bug Report

In the documentation it says that one can embed Vue instances. I tried building an interactive component for our documentation like so:

# Servers

Thanks to [AngrySnout](https://github.com/AngrySnout/SauerTracker) we have excellent statistics for the game.

<div id="server">
    <ul>
        <li v-for="server in servers" :key="server.description"> {{ server.descriptionStyled }} </li>
    </ul>
</div>

<script>
  const API_URL = "https://tomaten.sauertracker.net/api/servers"

  new Vue({
    el: '#server',
    data: () => ({
        servers: []
    }),
    async mounted {}
        console.log("HEY")
        const response = await fetch(API_URL);
        this.servers = await response.json(); 
    }
  })
</script>

However when loading the page the content quickly flashes before getting “rendered away”. I have no idea what sorcery is going on behind the scenes but my best bet is that it’s an unsupported feature.

Steps to reproduce

(see above)

What is current behaviour

(see above)

What is the expected behaviour

The app that is rendered on screen should allow for dynamic content.

Other relevant information

• Bug does still occur when all/other plugins are disabled?

• Your OS: OSX 10.15.3 (19D76)

• Browser version: Version 80.0.3987.132 (Official Build) (64-bit)

• Docsify version: 4.11.2

• Docsify plugins: search plugin

[Koooooo-7]

Actually ,It seems some issues about the Vue supports in docsify. Currently, when u create ur own Vue instance, you will not get the Vue instance in the mounted hook by using this (this directs to the window obj in docsify now).

the Vue instance was covered in this.__EXECUTE_RESULT__. there is showing how we execute script in docsify.

  // Execute script
  if (
    this.config.executeScript !== false &&
    typeof window.Vue !== 'undefined' &&
    !executeScript()
  ) {
    setTimeout(_ => {
      const vueVM = window.__EXECUTE_RESULT__;
      vueVM && vueVM.$destroy && vueVM.$destroy();
      window.__EXECUTE_RESULT__ = new window.Vue().$mount('#main');
    }, 0);
  } else {
    this.config.executeScript && executeScript();
  }

Although, I tried to set the root data in a hack way, it seems not work. I haven’t found a way to resolve it yet, I hope those informations could be helpful.

[jhildenbiddle]

@Fohlen –

Fixed in #1271. The example code you provided has a few issues though. Here’s update code that will work as is:

# Servers

Thanks to [AngrySnout](https://github.com/AngrySnout/SauerTracker) we have excellent statistics for the game.

<div id="server">
    <ul>
        <li v-for="server in servers" :key="server.description"><span v-html="server.descriptionStyled"></span></li>
    </ul>
</div>

<script>
  const API_URL = "https://tomaten.sauertracker.net/api/servers"

  new Vue({
    el: '#server',
    data: () => ({
        servers: []
    }),
    mounted() {
      console.log("HEY")
      fetch(API_URL)
        .then(response => response.json())
        .then(data => this.servers = data)
        .catch(err => console.log(err));
    }
  })
</script>