How to display the getter as text in the template-CodePudding

I have a getter, which I would like to display in the template as text.

The data is already in the getter, checked with devtools vue chrome extension. The data I want to get from the getter looks like this:

["appel", "banaan", "kiwi"]

My component looks like this: (the name of getter is getPlaylist)

<template>
    <div>
      <span>{{ showPlaylist }}</span>
    </div>
<template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters("app"["getPlaylist"]),

     showPlaylist() {
       this.getPlaylist;
     },
  },
};
</script>

How can I use this getter to show the text of the array?

Thanks in advance!

CodePudding user response：

Do you want to display this ["appel", "banaan", "kiwi"] in the template If yes, modify the code to

computed: {
...mapGetters("app"["getPlaylist"]),

 showPlaylist() {
  return this.getPlaylist;
 },

}

CodePudding user response：

Not sure what you're hoping to get with ...mapGetters("app"["getPlaylist"]), but I can't see it doing anything else other than being an undefined

"app" is a string, which doesn't behave like an object or array. the only thing available that could be accessed is string methods (ie "app"["startsWith"]("a")) or characters "app"[2])

if app is a module and getPlaylist the getter, you need to define it as:

computed: {
  ...mapGetters(["app/getPlaylist"]),
}

alternatively if app is another getter...

computed: {
  ...mapGetters(["app","getPlaylist"]),
}

or if app is a namespace

computed: {
  ...mapGetters("app",["getPlaylist"]),
}