Vue/cli 5.0.8 you need to pass the text of the variable to </template>, what is the best way to do it?

Viewed 17

I need to pass the text I get in the variable x to a string container at the very top.

<template>
  <span v-html="retext">

  </span>
</template>

<script>
// eslint-disable-next-line no-unused-vars
var retext;
var x;
export {x};

export default {
  name: `RenderText`,
  data() {
    return {
      retext: x

    }
  }
}


// eslint-disable-next-line no-unused-vars
export function textrender(){

  let xhr = new XMLHttpRequest()
  xhr.open("GET", "https://baconipsum.com/api/?type=all-meat&paras=1&format=text", false);
  xhr.send();

  xhr.onload = console.log(xhr.responseText);

  x = xhr.responseText;

  console.log(retext);

  // x = x.split('');
}

</script>

<style scoped>

</style>

All I get now is empty space.

The documentation site used v-bind, but it also doesn't work or I'm doing something wrong.

1 Answers
<template>
  <span>
    {{retext}}
  </span>
</template>

<script>
// eslint-disable-next-line no-unused-vars

var x;
var z;
export {x};

export default {
  name: `RenderText`,
  data() {
    return {
      retext: x
    }
  },
};

// eslint-disable-next-line no-unused-vars
function textrender(){

  let xhr = new XMLHttpRequest()
  xhr.open("GET", "https://baconipsum.com/api/?type=all-meat&paras=1&format=text", false);
  xhr.send();

  xhr.onload = console.log(xhr.responseText);

  x = xhr.responseText;

  z = x;

  z = z.split('');
}
textrender();

</script>

<style scoped>

</style>

Its working.

Related