はVUEコンポーネント名前空間の再利用可能な関数を定義する方法ここ

Question

は私のコードです：

Vue.component("ro-webview", { 
    props: ["src"], 
    template: `<div> 
<div> 
<div class="col-md-2 list-inline"> 
${this.getIcon("fa-arrow-left")} 
${this.getIcon("fa-arrow-right")} 
${this.getIcon("fa-refresh")} 
</div> 
<input class="col-md-10" :value="src"/> 
</div> 
<iframe class="col-md-12" :src="src"/> 
</div>`, 

    data: { 
    getIcon: function (iconName) { 
     return `<a class="btn btn-default" href="javascript:void(0)"><i class="fa ${iconName}" aria-hidden="true"></i></a>` 
    } 
    } 
}) 

クロームコンソールレイズ

Uncaught TypeError: this.getIcon is not a function 
    (anonymous function) 

getIconは、名前の競合が発生しますので、getIconを定義し、それを作る方法を定義します私のコンポーネントでのみ動作しますか？

Answer 1

次のように、methodsでメソッドを定義する必要があります。

Vue.component("ro-webview", { 
    props: ["src"], 
    template: `<div> \ 
     <div> \ 
     <div class="col-md-2 list-inline"> \ 
      <div v-html="getIcon('fa-arrow-left')" /> \ 
      <div v-html="getIcon('fa-arrow-right')" /> \ 
      <div v-html="getIcon('fa-refresh')" /> \ 
     </div> \ 
     <input class="col-md-10" :value="src"/> \ 
     </div> \ 
     <iframe class="col-md-12" :src="src"/> \ 
     </div>`, 
    methods: { 
     getIcon: function (iconName) { 
     return "<a class='btn btn-default href='javascript:void(0)'><i class='fa " + iconName + " aria-hidden='true'></i></a>" 
     } 
    } 
    }) 

を、あなたはテンプレートのコードでメソッドを呼び出すためにthisを必要といけません。

v-htmlも参照してください。

fiddleを参照してください。

Answer 2

別の方法が使用jsの匿名関数である：

(function() { 
    var getIcon = function (iconName) { 
    return `<li><a class="btn btn-default" href="javascript:void(0)"><i class="fa ${iconName}" aria-hidden="true"></i></a></li>` 
    } 
    Vue.component("ro-webview", { 
    props: ["src"], 
    template: `<div> 
<ul class="list-inline"> 
${getIcon("fa-arrow-left")} 
${getIcon("fa-arrow-right")} 
${getIcon("fa-refresh")} 
<li><input class="col-md-10" :value="src"/></li> 
</ul> 
<iframe class="col-md-12" :src="src"/> 
</div>` 
    }) 
})()