javascript - Cómo definir una función reutilizable en el espacio de nombres de un componente Vue

aquí está mi código:

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

consola de Chrome levantar

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

definir getIcon causará un conflicto de nombres, entonces ¿cómo definir getIcon y hacer que solo funcione en mi componente?

Respuesta #1

Tienes que definir el método en los métodos, como sigue:

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

y no necesitas this para invocar el método en el código de la plantilla.

También vea el uso de v-html.

Ver ejemplo funcional.

Respuesta #2

otra manera es usar una función anónima de 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>`
  })
})()