CODEWITHSUNDEEP
vue.jsvuejs3
emzenophin
emzenophin

Reputation: 17

Why isn't this list render working in Vue 3?

My App.vue looks like this:

<template>

  <HelloWorld />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

As you can see, I've imported the Component HelloWorld.

And HelloWorld.vue looks like this:

<template>
  <ul>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>

</ul>
<h1>OK</h1>
</template>

<script>

const Viewer = {
  
  data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]}

    },
  }

</script>

The header element "OK" is rendering, but the list messages are not.

Upvotes: 0

Views: 281

Answers (3)

Benjamin Fourgeaud
Benjamin Fourgeaud

Reputation: 864

I do not know what that Viewer object is. Your template cannot access the items object.

You can use the script setup :

<script setup>
  import { ref } from 'vue'
  const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

or the default script :

<script>
import { ref } from 'vue'

export default {
  setup (props) {
    const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
    return { items }
  }
}

</script>

Upvotes: 1

Andres Foronda
Andres Foronda

Reputation: 1409

As you are using <script setup> syntax, you only need this code to make it works:

<script setup>
  import { ref } from 'vue'
  const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

No data or return statements are required

Upvotes: 1

Amaarockz
Amaarockz

Reputation: 4674

In HelloWorld.vue, your script block should be like

<script setup>
  import { ref } from 'vue'

  export const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

</script>

Upvotes: 1

Related Questions