Reset content after scan (on "unPause")

[gewra]

Awesome component, thanks!

However I would like the option to redeem the same code again (in my case after it has been paused), something that isn't possible at the moment because of:

watch: {
    content (newValue) {
      this.$emit('decode', newValue)
    },
   ...
}

Since this.content isn't updated once it's set

A solution might be to add an 'resetOnUnpause'-prop and add 'paused' to 'watch':

props: {
     ...,
    resetOnUnpause : {
      type: Boolean,
      default: false,
    },
  }

watch: {
   paused(newValue) {
      if (this.resetOnUnpause && !newValue)
         this.content = null
   }
}

Is this something you might be willing to add or should I contribute myself?

Thanks again!

[gruhn]

Hey, thanks for contributing 😁

Can you elaborate your application a little bit and why you need this. I'd like to better understand in which use cases this is useful. I hesitate because right now you never have to null-check when listening for decode.

[gewra]

Sure thing!

In my case when a qrcode is read I pause the reader, validate it on our server and set it as read. The user may then choose to read another code where I unpause the reader again.
However the next code might sometimes be the exact same code hence my problem.

Think a punch ticket ("buy 9 get the 10th for free") when buying two coffees at once, for example. Then you should scan your qr-code twice in a row

I totally understand if this is to much of an edge case, and might clutter this otherwise very clean component. And:

watch: {
    content (newValue) {
      if (!!newValue)
          this.$emit('decode', newValue)
    },
   ...
}

might cause some involuntary projectile vomit here and there so that should be avoided of course

Not sure how to tackle this problem in my case. A hard reload does the trick, but something I'd like to avoid.

[gruhn]

Ok, I see...

I guess the only other way for now is using v-if to destroy the component while validating on your server which is just little bit better than reloading the hole page but not much better.

<qrcode-reader v-if="notValidatingRightNow" />

I totally understand if this is to much of an edge case, and might clutter this otherwise very clean component.

Thanks, and yeah. I'd like to keep everything as clean and tidy as possible. But of course this component should be as useful as possible too.

I actually like your solution there. I think it makes sense to do that by default. Not even conditionally with a prop. What do think could go wrong?

[gewra]

Yeah I was thinking of that solution as well, might use it for now.

Hmm, well "if (!!newValue)" might be the wrong approach in this case since it will invalidate some falsey values like 0. "if (newValue !== null)" is probably more correct in this case.

[gruhn]

Sure, go ahead open a PR ;)

[gruhn]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

• npm package (@alpha.0 dist-tag)
• GitHub release

Your semantic-release bot 📦🚀