V-forメソッドでコンマ区切り文字列を分割する

Question

Vue.jsのv-forメソッドを使用して、各コンマに文字列を分割しようとしています。

入力：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

私が正しく、カンマ区切りのテキストを分割することができますか？ object.tagsを呼び出すためにv-forループにいない限り、「タグ」入力にアクセスできません。

これはかなり私のコードでも同じことだが、これがうまくいかない理由はわからない：https://jsfiddle.net/9o3o11jc/1/

Answer 1

あなたは単語の配列にそれを回すために文字列操作を行うことができます。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return {objects:[{tags: 'test1, test2, test3'}]} 
 
    }, 
 
    methods: { 
 
     splitJoin(theText){ 
 
     \t 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>

Answer 2

あなたがJavaScriptからsplit方法およびセパレーターをしたいようです "" 聞こえます。 object.tagsは単一の文字列であるため、v-forディレクティブは文字列を文字の集合として読み取ります。あなたが望むのは、分割が返すストリングの集合です。