Question

从下面的代码中，我需要一个锚点Vue转换为Select

实际代码在这里

我试过了，

<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>

如何让它响应onchange事件。

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>

Answer 1

你的v-on存在很大的问题。它应该是head。请立即解决此问题： - ）

Vue js没有触发onChange

1 个答案: