Vue not displaying data from data object

Question

I am using NuxtJs and created test.vue in pages directory. Here is my code in test.vue.

<template>
  <div> 
    <h1 style="font-size: 30px">{{ message }} </h1>
    <h1 style="font-size: 30px"> Messsage here </h1>
  </div>
</template>

<script>

export default {
  data: {
    message: 'sdfsd'
  }
}
</script>

But {{ message }} not displaying. What is the problem?

data Must Be a Function vuejs.org/v2/guide/components.html#data-Must-Be-a-Function — Jacob Goh
– Jacob Goh, Commented Aug 13, 2018 at 5:33

tony19 · Accepted Answer · 2022-07-16 02:22:57Z

1

The data needs to be a function so that each instance can maintain an independent copy of the returned data object.

export default {
  data() {
    return {
       message: 'sdfsd'
    }
  }
}

Read more here

edited Jul 16, 2022 at 2:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 13, 2018 at 5:42

void

36.8k10 gold badges72 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue not displaying data from data object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related