1

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);
        }
    }
});
3
  • vuejs.org/v2/guide/forms.html#Select Commented Mar 6, 2018 at 9:21
  • it is because camera is not yet defined at that time. Commented Mar 6, 2018 at 9:21
  • what you can do is get the value of camera inside that function. don't forget that you are using vue. anything selected in the select field will reflect to your model camera.id, thus you don't need to pass the camera. Commented Mar 6, 2018 at 9:23

1 Answer 1

2

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]);    
                }
            }
        }
    }
});
Sign up to request clarification or add additional context in comments.

5 Comments

Why not simply this.selectedCamera inside selectedCameraOption()?
You wanted the selected object right? Now its available on option variable for you on selectedCameraOption method. I'm not sure what process you are further doing with it.
@lonut seems like he wants the whole selected object. Thats why I did it this way.
Works great absolutely. Thanks a lot
If he wants the whole object he should just bind it to the :value. Instead of :value="camera.id" would be :value="camera". Then he can get whatever he needs like this.selectedCamera.id, this.selectedCamera.someProp etc

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.