[Vuejs]-Why isn't this list render working in Vue 3?

by

1👍

✅

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>
👤Benjamin Fourgeaud

1👍

In HelloWorld.vue, your script block should be like

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

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

</script>
👤Amaarockz

1👍

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

👤Andres Foronda

Leave a comment