Question

我是Vue.js的新手，并围绕方法事件处理。

我的功能是使用网络摄像头输入读取条形码并显示其原始内容。

如果我只渲染原始内容，该函数可以正常工作。但是，如果我尝试将原始内容转换为更易读的形式。我收到以下错误：

调用TypeError: Cannot read property '1' of null方法时

formatBarcode。

我很确定它可能甚至与Vue.js无关，但是常见的JS问题。

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]}`;
        }
    }
});

这是我试图测试https://regex101.com/r/SvCs5t/3

的正则表达式

工作小提琴来测试正则表达式转换https://jsfiddle.net/o01474u2/

Answer 1

与VueJS无关，但与您的算法有关，如评论中所述。

这是一个可能正常工作的修复，使用一个简单的变量来存储正则表达式的最后一个值;不确定它是否适用于所有情况，但至少对于您的示例，它会给出结果。

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]}`)

在Vue.js中传递方法事件处理

1 个答案: