Passing a parameter to Vue function

Question

How can I pass selected value to a vuejs function?

With reference to the code below, how do I pass it?

Here selectCamera(camera), camera variable is not known as it is nested. How do I make selected camera variable to be sent to selectCamera?

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

UPDATE

I have the code attached as follows

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

Answer 1

I think you are trying to get the selected camera option from the dropdown. Try it this way

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