文字列補間Vue js

Question

文字列と小道具を組み合わせて、ブートストラップアコーディオン用に一意のidを作成しようとしています。

私のようなものを作成するために「崩壊」と{{thread_refを}}組み合わせたい：id="collapse_321"

Vueが私に私はこれをしようと、エラーを与えるとvバインドを使用することを言います。

私はそれを試しましたが、それはprop/dataの名前の文字列しか受け入れません。どのように文字列とデータを組み合わせることができますか？

:id="'collape' + thread_ref" 

" "内にあるものはすべてあなたがv-bindや:を使用して、プロパティではJavaScriptでバインド：

Answer 1

：

マークアップを

<div :id="collapse_id"></div> 

ビューモデル

computed: { 
    collapse_id() { 
    return 'collapse_' + this.thread_ref 
    } 
}, 

はしかし、それはdataで利用可能thread_refに依存している、ここにJSFiddleです：https://jsfiddle.net/j9s3zhp2/

それはv-forの内側に配置されている場合は、methodと同じことを達成することができます

マークアップ

<div v-for="ref in refs"> 
    <div :id="collapse_id(ref)"></div> 
</div> 

モデルを表示

methods:{ 
    collapse_id(thread_ref){ 
    return 'collapse_' + thread_ref 
    } 
} 

そして、ここではそのためJSFiddleです：https://jsfiddle.net/5o1dp7w5/

Answer 2

はこのようにそれを実行してください。だから、あなたはJavaScriptで行う任意の単一のライン表現を行うことができます

Vamsiで述べたようにあなたはそれを inlineことができますが、あなたはまた、滑らかな印象構文のビットがある computed、使用することができ