Vue3, child component doesn't render dynamic string value

Question

When I import HelloWorld component into App.vue, I'm unable to see the content of contenutoHeader.

HelloWorld:

<template>
  <h1>{{ contenutoHeader }}</h1>
</template>

<script>
const contenutoHeader = "Sto funzionando";

export default {
  name: "HelloWorld",
};
</script>

App.vue

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>

Any suggestion?

You need to review any tutorial on basic Vue.js reactivity – Hovercraft Full Of Eels Jan 08 '23 at 18:53 — Hovercraft Full Of Eels, Jan 08 '23 at 18:53

score -1 · Answer 1 · answered Jan 08 '23 at 16:08

-1

You need to add your state to the data, like so:

<template>
  <h1>{{ contenutoHeader }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",

  data () {
      return {
           contenutoHeader: "Sto funzionando"
      }

  }
};
</script>

Anything within the data is reactive and can be used in your template

answered Jan 08 '23 at 16:08

Abdullah Hejazi

277
2
8

I forgot to mention I'm using the composition API. What's the alternative to this? – juzello Jan 08 '23 at 17:04
the alternative is to use ref, for example const contenutoHeader = ref("Sto funzionando") – Abdullah Hejazi Jan 08 '23 at 17:12
Your example isn't in the full composition API format (when you use ` – BenjaminEllis Feb 22 '23 at 13:45

Vue3, child component doesn't render dynamic string value

1 Answers1