How to define a reusable function in vue component namespace

Question

here is my code:

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

chrome console raise

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

define getIcon will cause name conflict, so how to define getIcon and make it only work in my component?

tony19 · Accepted Answer · 2022-07-15 21:39:35Z

6

You have to define method in methods, like following:

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

and you dont need this to invoke method in the template code.

Also see usage of v-html.

See working fiddle.

edited Jul 15, 2022 at 21:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 28, 2016 at 2:53

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chikadance Over a year ago

It doesn't work in es6, since ${} means insert smth into `` string

chikadance · Accepted Answer · 2016-12-28 08:50:32Z

0

another way is use js anonymous function:

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

answered Dec 28, 2016 at 8:50

chikadance

4,1958 gold badges48 silver badges91 bronze badges

Collectives™ on Stack Overflow

How to define a reusable function in vue component namespace

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related