Cоздать компонент Vue и событие внутри него?

Question

[moskwin68]

Задача: создать компонент с ползунком, меняющим размер шрифта в блоке.

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

Мой компонент:

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

Как сделать так, чтобы при onchange input'а выполнялась следующая функция:
function fontResize(selector, target) { }

Пытаюсь получить типа:

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

Comments

[0xD34F]

А может вам всё-таки документацию открыть да почитать?

[moskwin68]

0xD34F, читаю, но не могу понять, поэтому пытаюсь осознать в контексте своей задачи

[0xD34F]

moskwin68,

читаю

Чё-то я вам не верю. Как можно, ознакомившись с документацией, написать onchange="..." - у меня в голове не укладывается.

в контексте моей задачи

О которой вы почему-то решили умолчать.

[moskwin68]

0xD34F, так?
v-on:change=""

[0xD34F]

moskwin68, ну что за детский сад-то такой??! А что в документации написано? Или вы ей не доверяете?

И всё-таки - расскажите, что вы пытаетесь сделать. Я конечно догадываюсь, но хотелось бы услышать это от вас.

[moskwin68]

0xD34F Задача: создать компонент с ползунком, меняющим размер шрифта в блоке.

Answer 1

[0xD34F]

Вариант раз, размер шрифта делаем свойством компонента, ну и v-model + watch:

data: () => ({
  size: ...
}),
watch: {
  size: {
    immediate: true,
    handler(val) {
      fontSize(this.target, val);
    },
  },
},

<input type="range" v-model="size">

Вариант два - слушаем событие input:

methods: {
  onInput(e) {
    fontSize(this.target, e.target.value);
  },
},
mounted() {
  this.$el.querySelector('input').dispatchEvent(new Event('input'));
},

<input type="range" @input="onInput">