Vue reactive object containing array of object

Question

I have tried many different formats, but can only make this work:

// This works
<script setup lang="ts">
import { reactive } from 'vue'
import { IPixabayItem } from '../interfaces/IPixapayItem'
const imageList: IPixabayItem[] = []
const foundImages = reactive(
    {
        images: imageList
    }
)
</script>

Somehow I would like to avoid the const 'imageList' and instantiate the 'IPixabayItem[]' inside the reactive object; but cannot make this transpile.

// This dosn't work
<script setup lang="ts">
import { reactive } from 'vue'
import { IPixabayItem } from '../interfaces/IPixapayItem'
const foundImages = reactive(
    {
        images: IPixabayItem[] = []
    }
)
</script>

Help appreciated

Tobias S. · Accepted Answer · 2022-05-30 22:31:05Z

2

You can provide an empty array as the value for images and set IPixabayItem[] as the generic parameter of reactive.

const foundImages = reactive<{images: IPixabayItem[]}>({
    images: []
})

Playground

or you could use the as keyword:

const foundImages = reactive({
    images: [] as IPixabayItem[]
})

Playground

answered May 30, 2022 at 22:31

Tobias S.

24.3k7 gold badges37 silver badges64 bronze badges

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

2 Comments

erm2000 Over a year ago

Wow, Thanks Tobis S. Your idea seems to work !! ..hmm Sorry my formating. I'm newbee in making posts in stackocerflow :-(

<script setup lang="ts"> import { reactive } from 'vue' import { IPixabayItem } from '../interfaces/IPixapayItem' const foundImages = reactive(     {     images: [] as IPixabayItem[]     } ) </script>

erm2000 Over a year ago

Hi Tobias Sorry my misspelling of Tobias (and stackoverflow) but you deserve a "tumps up" for your great reply; which I cannot give :-( Stackoverflow "Tumps up" reply: "Thanks for the feedback! You need at least 15 reputation to cast a vote, but your feedback has been recorded." /erm2000

Collectives™ on Stack Overflow

Vue reactive object containing array of object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related