javascript - Ako definovať znovupoužiteľnú funkciu v namespace komponentu vo Vue

tu je môj kód:

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>`
    }
  }
})

konzola Chrome vyvolať

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

definovanie getIcon spôsobí konflikt mien, tak ako definovať getIcon a zabezpečiť, aby fungoval iba v mojej komponente?

Odpoveď č. 1

Musíte definovať metódu v metódach, ako nasleduje:

    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>"
      }
    }
  })

a na vyvolanie metódy v šablónovom kóde nepotrebujete this.

Pozri tiež použitie v-html.

Pozrite si fungujúce fiddlle.

Odpoveď č. 2

ďalší spôsob je použiť anonymnú funkciu v 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>`
  })
})()