Create a Vue component and an event inside it?

Question

Vue.js

Task: create a component with a slider that changes the font size in the block.

<div id="controls">
 <font-size target="headline"></font-size>
<div>

My component:

Vue.component('font-size', {
  props: ['target'],
  template: '<div id="controls-item"><input type="range" value="30"></div>'
});
new Vue({ 
  el: '#controls',
})

How to make it so that the following function is executed when the input is onchange: I'm trying to get the type:
function fontResize(selector, target) { }

template: '<div id="controls-item"><input type="range" value="30" onchange="fontResize(this, ' {{ target }} ')"></div>'

Answer 1

You don't need to process any events, v-model + watch is fine.
UPD. "No need" is a joke. It is possible with a subscription to the event, and the code will be even shorter .