在v-for方法中分割逗号分隔的字符串

Question

我正在尝试使用v-forVue.js中的方法在每个逗号上分割字符串。

输入： tags: 'test1, test2, test3'
方法： <span v-for="tag in tags" v-text="tag"/>
输出： t e s t 1 , t e s t 2 , t e s t 3
所需输出： test1 test2 test3

如何正确分割逗号分隔的文字？除非v-for为了调用，我处于循环中，否则我将无法访问“标签”输入object.tags。

不知道为什么这不起作用，尽管在我的代码中几乎是一样的东西：https : //jsfiddle.net/9o3o11jc/1/

Answer 1

您可以String.prototype.split()用来将字符串转换为单词数组。

new Vue({
  el: '#app',
  data() {
    return {objects:[{tags: 'test1, test2, test3'}]}
   },
   methods: {
      splitJoin(theText){
      	return theText.split(', ');
      }
   } 
});

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js'></script>
<div id="app">
  <div v-for="object in objects">
    <span v-for="tag in splitJoin(object.tags)" v-text="tag"></span>
  </div>
</div>