将参数传递给Vue函数

时间:2018-03-06 09:19:36

标签: javascript vue.js

如何将所选值传递给vuejs函数?

参考下面的代码,我该如何传递它?

这里是selectCamera(相机),相机变量未知,因为它是嵌套的。如何将选定的摄像机变量发送到selectCamera?

var app = new Vue({
    el: '#app',
    data: {
        scanner: null,
        activeCameraId: null,
        cameras: [],
        scans: []
    },
    mounted: function() {
        var self = this;
        self.scanner = new Instascan.Scanner({
            video: document.getElementById('preview'),
            mirror: true,
            backgroundScan: false,
            scanPeriod: 2
        });
        self.scanner.addListener('scan', function(content, image) {
            PlaySound();
            showContent(content);
            //google.script.run.capture(content);
            alert(content)

            $.ajax({
            url: 'https://script.google.com/macros/s/AKfycbzObHXjA-gXSyxvyRc5nYVs6yP2sElNpfuWMsIGtLf1yUUXd4n7/exec?data='+content+'&callback=doNothing',
            type: 'GET',
            dataType: 'jsonp',
            error: function(xhr, status, error) {
                alert("error");
            },
            success: function(json) {
                alert("success");
            }
        });



            self.scans.unshift({
                date: +(Date.now()),
                content: content
            });
        });
        Instascan.Camera.getCameras().then(function(cameras) {
            self.cameras = cameras;
            if (cameras.length > 0) {
                self.activeCameraId = cameras[1].id;
                self.scanner.start(cameras[1]);
            } else {
                console.error('No cameras found.');
            }
        }).catch(function(e) {
            console.error(e);
        });
    },
    methods: {
        formatName: function(name) {
            return name || '(unknown)';
        },
        selectCamera: function(camera) {
            this.activeCameraId = camera.id;
            this.scanner.start(camera);
        }
    }
});

更新

我附上的代码如下

QString rowQuery = "INSERT INTO " + table.getName() + " VALUES ";
for (Row* r : table) {
    rowQuery += "(";
    for (QVariant v : r.getValues()) {
        rowQuery += v.toString();
        rowQuery += ","
    }
    rowQuery.chop(1);
    rowQuery += "),";
}
rowQuery.chop(1);
QSqlQuery::exec(rowQuery)

1 个答案:

答案 0 :(得分:2)

我认为您正试图从下拉列表中选择所选的相机。试试这种方式

HTML

    <select style="width:100%" v-model="activeCameraId" v-on:change="selectCamera()">
        <option v-for="camera in cameras" :value="camera.id"> {{ formatName(camera.name) }} </option>
    </select>

JS

var app = new Vue({
    el: '#app',
    data: {
        scanner: null,
        activeCameraId: null,
        cameras: [],
        scans: []
    },
    mounted: function() {
        var self = this;
        self.scanner = new Instascan.Scanner({
            video: document.getElementById('preview'),
            mirror: true,
            backgroundScan: false,
            scanPeriod: 2
        });
        self.scanner.addListener('scan', function(content, image) {
            PlaySound();
            showContent(content);
            alert(content)

            $.ajax({
                url: 'https://script.google.com/macros/s/AKfycbzObHXjA-gXSyxvyRc5nYVs6yP2sElNpfuWMsIGtLf1yUUXd4n7/exec?data='+content+'&callback=doNothing',
                type: 'GET',
                dataType: 'jsonp',
                error: function(xhr, status, error) {
                    alert("error");
                },
                success: function(json) {
                    alert("success");
                }
            });

            self.scans.unshift({
                date: +(Date.now()),
                content: content
            });
        });
        Instascan.Camera.getCameras().then(function(cameras) {
            self.cameras = cameras;
            if (cameras.length > 0) {
                self.activeCameraId = cameras[1].id;
                self.scanner.start(cameras[1]);
            } else {
                console.error('No cameras found.');
            }
        }).catch(function(e) {
            console.error(e);
        });
    },
    methods: {
        formatName: function(name) {
            return name || '(unknown)';
        },
        selectCamera: function() {
            for (var i = 0; i < this.cameras.length;i++) {
                if (this.cameras[i].id === this.activeCameraId) {
                    this.scanner.start(this.cameras[i]);    
                }
            }
        }
    }
});