CODEWITHSUNDEEP
javascriptvue.js
Code Guy
Code Guy

Reputation: 3198

Vue js not triggering onChange

from the below code, I need a anchor Vue to be converted to Select

The actual code is here

https://github.com/schmich/instascan

I have tried with,

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

How do I make it respond to onchange event.

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

      var toastElement = $('.toast').first()[0];
      if(toastElement )
      {
        var toastInstance = toastElement.M_Toast;
        toastInstance.remove();
      }

      Materialize.toast(content, 4000);
      //alert(content);
      $.post("https://script.google.com/a/cofm.edu.in/macros/s/AKfycbzObHXjA-gXSyxvyRc5nYVs6yP2sElNpfuWMsIGtLf1yUUXd4n7/exec", {
        "data": content
      }).done(function(data) {
        ;//alert("Data Loaded: " + data)
      });
      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: {
    formatName: function(name) {
      return name || '(unknown)';
    },
    selectCamera: function(camera) {
      this.activeCameraId = camera.id;
      this.scanner.start(camera);
    }
  }
});

NOTE:The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
	<div id="app">
     <div class="sidebar">
       <section class="cameras">
         <h2>Cameras</h2>
         <ul>
           <li v-if="cameras.length === 0" class="empty">No cameras found</li>
           <li v-for="camera in cameras">
             <span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ formatName(camera.name) }}</span>
             <span v-if="camera.id != activeCameraId" :title="formatName(camera.name)">
               <a @click.stop="selectCamera(camera)">{{ formatName(camera.name) }}</a>
             </span>
           </li>
         </ul>
       </section>
       <section class="scans">
         <h2>Scans</h2>
         <ul v-if="scans.length === 0">
           <li class="empty">No scans yet</li>
         </ul>
         <transition-group name="scans" tag="ul">
           <li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li>
         </transition-group>
       </section>
     </div>
     <div class="preview-container">
       <video width="75%" height="75%" id="preview"></video>
     </div>
     </div>

Upvotes: 1

Views: 3491

Answers (1)

bbsimonbb
bbsimonbb

Reputation: 29002

There's a huge problem with your v-on. It should be v-on:change="selectCamera". Please fix this immediately :-)

Upvotes: 1

Related Questions