str.split() 在每个字母处分割，而不是在分隔符处

Question

我正在尝试将我从 firebase 返回的标签字符串拆分为“，”，然后将它们存储在我的 data() 中以进行渲染。当我在控制台中拆分它们的标签后渲染出 firebase 快照数据时，它们的格式正确，如下所示：

"tag1" "tag2"

但是当我在我的 vue 应用程序中渲染它们时，它们会在每个字母处拆分（或者至少生成一个 div 并为每个字母显示），如下所示：

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

有人可以告诉我这是我的 vue 应用程序还是我的 firebase 调用的问题吗？

我已经包含了一些我用来显示数据中标签数组的最终结果的虚拟数据。

这是我的应用程序供参考:)

<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() 每次调用该方法时都会生成一个新对象。

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

上面这行是没有意义的，你创建了一个新对象，但永远不要将它存储在一个变量中。这意味着您以后无法使用它。而是将结果对象分配给变量并使用它。

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

由于标签的拆分没有保留在问题代码中。 tag 在：

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

设置为字符，因为art.tags 是字符串而不是数组。