Могу ли я добавить условные события на компоненты Svelte? - PullRequest
Новая
       16

Могу ли я добавить условные события на компоненты Svelte?

0 голосов
/ 31 января 2019

возможно ли событие вызываться при условии, определенном в родительском компоненте?

У меня есть компонент ввода, где я хочу захватить ввод ... иногда, но большую часть времени я не хочу, чтобы событие запускалось 

   //App.html
   <Input on:inputData="doStuff(event)" fireEvent=true />    

   //Input.html
   <input bind:value=value (fireEvent ? on:keyup='fire("inputData", { value })' : false )/>

В настоящее время происходит то, что fireEvent игнорируется и on:keyup всегда срабатывает

ОБНОВЛЕНИЕ
Я изменил keyup в вызов функции, где я проверил параметр перед запуском события, он работает, но это довольно странно 

//App.html
<Input on:inputData='doStuff(event.value)' fireEvent={true} />
 ...
  methods: {
  doStuff(text) {
    console.log('here is the stuff', text);
  }

//Input.html
<input bind:value=value on:keyup='setData({ value })'/>
...
methods: {
  setData(text) {
    if(this.get().fireEvent) {
      this.fire("inputData", text)
    }
  }
}

Кто-нибудь получил более красивое решение этой проблемы?

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Я не знаю, почему я не подумал об этом, но это именно то, что onupdate для 

//App.html
<Input on:inputData='doStuff(event.value)' fireEvent={true} />
     ...
methods: {
 doStuff(text) {
   console.log('here is the stuff', text);
 }

//Input.html
<input bind:value=value />
...
onupdate({ changed, current, previous }) {
  if(this.get().fireEvent) {
    this.fire("inputData", current)
  }
0 голосов
/ 31 января 2019

Я попробовал следующее, и это сработало.обратите внимание на нижний регистр 'fireevent'.Заглавная буква скинула его.Естественно, вам придется изменить его на: inputData и т. Д. 

	methods: {
	    test(evt) {
		console.log('evt.fireEvent', evt.target.getAttributeNode("fireEvent").value);
		if (evt.target.getAttributeNode("fireevent").value && evt.target.getAttributeNode("fireevent").value=="true")
		    console.log('do the happy dance');
		else
		    console.log('do NOTHING');

	    }
	}
<button on:click="test(event)" fireevent="false">Test</button>
...