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);
}
}
});
camerais not yet defined at that time.camerainside that function. don't forget that you are using vue. anything selected in the select field will reflect to your modelcamera.id, thus you don't need to pass the camera.