str.split() is splitting at every letter and not at the delimiter

Question

I'm trying to split a string of tags that I'm getting back from firebase by ',' and then store them in my data() for rendering. When I render out the firebase snapshot data after I split they tags in the console they are correctly formatted like so:

"tag1" "tag2"

but when I render them in my vue app, they are split at every letter (or at least a div is generated and is displaying for every letter) like so:

<div>"t"</div>
<div>"a"</div>
<div>"g"</div>
<div>"1"</div>

Can someone let me know if this is an issue with my vue app or my firebase call?

I have included some dummy data that I'm using to show the final result of how the tags array in data should look.

Here's my app for reference :)

<div id="container">
<div class="topbar">

          <h3 id="header">DevDeep</h3>

           <div id="searchDiv">
                <b-form-input id="search" v-model="search" placeholder="search articles"></b-form-input>
                <font-awesome-icon id="searchBtn" @click="searchResults()" icon="search" />
          </div>
  </div>

<!--main part of page-->
<div class="bod">

      <div class="sideContainer">
            <h4 id="category">categories</h4>
          <ul id="listoflinks" v-for="cat in categories" :key="cat.toString()">
            <div @click="searchResultsByCat(cat)">{{cat}}</div>
          </ul>
      </div>


<div id="centerContainer">
      <div>
        <h5> Tag list </h5>

        <div class="flexContainer">
            <div id="selectedTags" v-for="tag in tagList" :key="tag.toString()">
                <span id="tag" @click="removeTag(tag)">{{tag}}</span>   
            </div> 
          <font-awesome-icon id="searchBtn" @click="searchbyTags()" icon="search" />
        </div>

         
      </div>

      <div id="artDiv" v-for="art in articles" :key="art.title">
          
          <div @click="gotoArticle(art)" id="thumbnail">
            <h5 >{{art.title}}</h5>  
            <img :src=art.image height="100px" width="100px" alt="article thumbnail">
          </div>
          
<!--TAGS-->/////////////////////////////////////////
        <div class="flexContainer">
            <div id="tags" v-for="tag in art.tags" :key="tag.toString()">
                <span id="tag" @click="addTagToSearch(tag)">{{tag}}</span>
            </div>
        </div>
<!--TAGS-->//////////////////////////////////////////

      </div>
</div>


      <div class="addContainer">adds</div>
  </div>

  <!--main part of page-->

</div>


</template>

<script>
const fb = require('../../fireconfig.js')

export default {
  name: 'Home',
  data:function() {
    return{
       articles: [
         {
           title: 'modern web app security',
           body: 'some content here about web app security',
           image: 'dd',
           tags: ['cyber security','web apps', 'web development']
        },
         {
           title: 'intro to ArcGIS',
           body: 'an article to show users how to do GIS stuff',
           image: 'dwwd',
           tags: ['arcgis','node js','gps services']
        },
        {
           title: 'Vue.js injecting props',
           body: 'this is how to inject vue props into a component',
           image: 'dwwd',
           tags: ['vue','props','components','web development','web apps']  
        }
      ],
      categories:['web development', 'arcgis','cyber security','partnerships'], 
      search: '',
      tagList: []
    }
  },
  props: {
    post: Object
  },
  created(){
                console.log('db post will go here later')
          let ref = fb.db.collection('articles')
          ref.get()
        .then(snapshot => {
          if (snapshot.empty) {
            console.log('No matching documents.');
            return;
          }  
          snapshot.forEach(doc => {  //this works for each doc
            console.log(doc.id, '=>', doc.data());

            doc.data().tags = doc.data().tags.split(",") // its splitting each letter we need to only split at the comma
            console.log(doc.data().tags)

            this.articles.push(doc.data()) //push object into state array
          })

        })
        .catch(err => {
          console.log('Error getting documents', err);
        });
  },
}
</script>

Answer 1

doc.data() will produce a new object each time you call the method.

doc.data().tags = doc.data().tags.split(",") // its splitting each letter we need to only split at the comma

The above line is pointless you create a new object, but never store it in a variable. Which means that you can't use it later. Instead assign the resulting object to variable and use that.

const data = doc.data(); // create the data object only once
data.tags = data.tags.split(",");
this.articles.push(data);

Since the split of the tags didn't persist in the question code. tag in:

<div id="tags" v-for="tag in art.tags" :key="tag.toString()">

Is set to a character, because art.tags is a string and not an array.