Passing method event handling in Vue.js

Question

I am very new to Vue.js and wrapping my head around method event handling.

What my function is doing is to read a barcode using web camera input and display its raw content.

The function works fine if I just render the raw content. However, if I try to transform the raw content to a more readable form. I am getting the following error:

TypeError: Cannot read property '1' of null when calling formatBarcode method.

I am pretty sure it's probably not even related to Vue.js in particular but a common JS problem.

html

<div id="scan">
    <div class="row m-b-1">
        <div class="col-sm-6">
            <video id="preview"></video>
            <h5>Camera</h5>
            <ul>
                <li v-for="camera in cameras">
                    <span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ camera.name }}</span>
                </li>
            </ul>
        </div>
        <div class="col-sm-6">
            <h5>Scans</h5>
            <transition-group name="scans" tag="ul">
                <li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ formatBarcode(scan.content) }}</li>
            </transition-group>
        </div>
    </div>
</div>

JS

var app = new Vue({
    el: '#scan',
    data: {
        scanner: null,
        activeCameraId: null,
        cameras: [],
        scans: []
    },
    mounted: function() {
        var self = this;
        self.scanner = new Instascan.Scanner({
            video: document.getElementById('preview'),
            scanPeriod: 5
        });
        self.scanner.addListener('scan', function(content) {
            self.scans.unshift({
                date: +(Date.now()),
                content: content
            });
        });
        Instascan.Camera.getCameras().then(function(cameras) {
            self.cameras = cameras;
            if (cameras.length > 0) {
                self.activeCameraId = cameras[0].id;
                self.scanner.start(cameras[0]);
            } else {
                console.error('No cameras found.');
            }
        }).catch(function(e) {
            console.error(e);
        });
    },
    methods: {
        formatBarcode: function(content) {
            const regex = /(01)(\d{14}|\d{0}})(21)(\d{10}|\d{0})/g;
            let m;

            while ((m = regex.exec(content)) !== null) {
                // This is necessary to avoid infinite loops with zero-width matches
                if (m.index === regex.lastIndex) {
                    regex.lastIndex++;
                }
            }

            return `Group1: (${m[1]}) ${m[2]} Group: (${m[3]}) ${m[4]}`;
        }
    }
});

This is the regex I'm trying to test https://regex101.com/r/SvCs5t/3

Working fiddle to test the regex transformation https://jsfiddle.net/o01474u2/

I have no error when running your fiddle. Please give a reproduction of your bug. — FitzFish
– FitzFish, Commented Jul 24, 2017 at 9:00
The fiddle is just to test the regex function which works in isolation but it doesn't work and giving the type error when plugging into vue method and calling in my HTML — 0xburned
– 0xburned, Commented Jul 24, 2017 at 9:02
Well except if having the returned value in the while loop is the expected behavior, you do have a bug in your method as well. See version with extracted console.log: jsfiddle.net/o01474u2/1 — FitzFish
– FitzFish, Commented Jul 24, 2017 at 9:10
yeah, I can not access the variable m outside the while loop. Any fix for that? — 0xburned
– 0xburned, Commented Jul 24, 2017 at 9:48
Your variable is accessible, but has the value null. Problem in your algorithm somehow. — FitzFish
– FitzFish, Commented Jul 24, 2017 at 10:57

FitzFish · Accepted Answer · 2017-07-24 11:00:06Z

0

Does not have anything to do with VueJS then, but with your algorithm, as stated in the comments.

Here is a probably working fix, using a simple variable to store the last value of your regex; not sure it works in all cases but at least for your example, it gives a result.

const regex = /(01)(\d{14}|\d{0})(21)(\d{10}|\d{0})/g;
const str = `01050004560134822100000000091`;
let m, n;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    n = m;
}
console.log(`Group 1: (${n[1]}) ${n[2]} Group 2: (${n[3]}) ${n[4]}`)

answered Jul 24, 2017 at 11:00

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing method event handling in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related