Vue.jsエスケープダブルコロン

Question

以下のコードは、vue.jsで書かれています。

作成する可能性はありますか？mailto -link？
Vueはダブルコロンが好きではありません:はmailto:item.urlと思われます。

Vue.component('my-component', { 
    props: ['item'], 
    template: ` 
    <div class="foo"> 
     <a v-bind:href="mailto:item.url"> 
     {{ item.url }} 
     </a> 
    </div> 
    ` 
}); 

Answer 1

Vuejsはダブルコロンをエスケープしませんでした。 v-bind:href="..."の中に書いたものは文字列ではなく、JavaScriptコードです。

mailto:item.urlは、有効なjavascriptコードではありません。言語ツールを使用して文字列を作成する必要がありました。

その文字列を構築するための別の解決策：

1. 使用ES6 Template Literals - クリーナー構文。
2. v-bind:hrefを明示的に宣言する必要はありません。簡略:hrefを使用することができます。これはより標準的で読みやすいです。

   1あなたはtemplate string内側すでにあなたの全体template入れ

   <a :href="`mailto:${item.url}`"> 
   

   編集：

はコードを参照してください。 It is possible to nest template literal inside another template literal expression。

天気あなたのテンプレートのリテラルを使用するとコードの可読性に貢献すると思います。それは個人的な趣味です。

単純なフォームのテンプレートを使用している場合、場合によっては議論の余地があります。 vue-loaderが設定されているwebpack boilerplateを使用すると、はるかに読みやすくなります。

Answer 2

ただ、次のコードが動作することを自分で見つけた：

v-bind:href="'mailto:' + item.mail"