expose the api for adding custom modifier #6982

elvismacak · 2017-11-01T02:52:14Z

What problem does this feature solve?

It would be much helpful if expose the api for adding custom modifiers.

e.g.

-. Some actions must be confirmed before doing the real work.

<button v-on:click.confirm='removeItem()'> Remove </button>

function removeItem() {
showConfirmDialog( realRemoveItem(), /* accept function */)
 }

would be simple like to

 <button v-on:click.confirm='realRemoveItem()'> Remove </button>

-. Some button or elements should track the log rate, while it would not that comfortable if log them in js

<!-- a tweat button in the top -->
<button v-on:click.log='tweat("top")'  data-tweat_potision='top'> Tweat </button> 
<!-- a tweat button in the bottom -->
<button v-on:click.log='tweat("bottom")' data-tweat_potision='bottom'> Tweat </button> 

function tweat(position) {
const logs = {position};
http.post(..., logs);
....
doRealTeatAction();
}

would be simple like to

<!-- a tweat button in the top -->
<button v-on:click.log='tweat()'  data-tweat_potision='top'> Tweat </button> 
<!-- a tweat button in the bottom -->
<button v-on:click.log='tweat()' data-tweat_potision='bottom'> Tweat </button>

// a global log function for log modifer
function log($event) {
  const logs = $event.targetElement.dataset;
  http.post(..., logs);
}

What does the proposed API look like?

<button v-on:click.log> Add to chart </button>
<button v-on:click.confirm> Remove </button>

Vue.config.customeModifer.log = function(){}
Vue.config.customeModifer.confirm = function() {}

The text was updated successfully, but these errors were encountered:

yyx990803 · 2017-11-01T13:35:07Z

The designed usage for modifiers is to limit when the handler should be fired. Your proposed modifiers fall into a different category and IMO makes the concept overloaded just for syntax convenience. Custom behavior that goes beyond firing or not is better done in JavaScript. You can reuse it as a method wrapper/decorator:

methods: {
  foo: wrapWithLog(function () { ... }),
  bar: wrapWithConfirm(function () { ... })
}

mislavlukach · 2019-03-25T15:19:03Z

@yyx990803

What about calling the v-on:click handler only once when the user-specified predicate is set to true. For example call the handler at most once when the form is valid. So I'm actually looking for some kind of parameterized once modifier.
Well my use case would for sure fall into category "limit when the handler should be fired".

Here is my current code.

async submitForm() {
     if(this.disableSubmit){
         return
     }
     const isValid = this.validateForm()
      if(!isValid){
        return
      }
      this.disableSubmit = true
      // call API
}

Here is my desired code.

<button text="Create" @click.once-valid="submitForm" />

So the real question would be: "Are the custom modifiers not an option in the near future?"
If not, I think I'll try to implement a custom directive to avoid code repetition.

yyx990803 closed this as completed Nov 1, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

expose the api for adding custom modifier #6982

expose the api for adding custom modifier #6982

elvismacak commented Nov 1, 2017

yyx990803 commented Nov 1, 2017

Uh oh!

mislavlukach commented Mar 25, 2019

Uh oh!

expose the api for adding custom modifier #6982

expose the api for adding custom modifier #6982

Comments

elvismacak commented Nov 1, 2017

What problem does this feature solve?

What does the proposed API look like?

yyx990803 commented Nov 1, 2017

Uh oh!

mislavlukach commented Mar 25, 2019

Uh oh!