原生js转vue中的事件触发问题

Question

原生js项目转vue, 使用onclick, 事件不能正常监听, 无法触发事件处理函数.
原生代码内存在<template></template>标签, 此处直接放到vue内使用(不知道是否会存在问题).

请不要提供使用@ click的方案, 该项目内并不适用.

逻辑简化之后如下, 代码可跑:

<template>
  <div id="home">
    <div id="main-editor"></div>
    <template id="editor-template">
      <div id="main-ui" class="editor-ui">
        <div id="header">
          <div id="global-info">
            <div id="selectors">
              <select id="scene-selector">
                <option>--scene0--</option>
                <option>--scene1--</option>
                <option>--scene2--</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

import { Editor } from "../../public/js/editor.js";

export default {
  name: "Home",
  created() {
    this.$nextTick(() => {
      this.start();
    });
  },
  methods: {
    async start() {
      let mainEditor = await this.createMainEditor();
    },
    async createMainEditor() {
      let template = document.querySelector('#editor-template');
      let maindiv = document.querySelector("#main-editor");
      let main_ui = template.content.cloneNode(true);
      // 上面这段是原生写法, 在vue中会报错template中无content属性
      // 我把这三句改成如下三句了
      // let maindiv = document.querySelector("#main-editor");
      // let template = document.querySelector("#main-ui");
      // let main_ui = template.cloneNode(true);
      maindiv.appendChild(main_ui);

      let editor = new Editor(maindiv.lastElementChild);
      window["editor"] = editor;
      return editor;
    },
  },
};

// editor.js
import { Header } from './header.js';
function Editor(editorUi) {
    this.init = function () {
      this.header = new Header(editorUi.querySelector("#header"), (e) => {
        this.scene_changed(e.currentTarget.value);
      });
    }
    this.init();
  }
  
  export { Editor };

// header.js
var Header = function (ui, onSceneChange) {
    this.sceneSelectorUi = ui.querySelector("#scene-selector");
    this.sceneSelectorUi.onchange= ((e) => {
      onSceneChange();
    })
  };
  
  export { Header };

希望能够得知事件无法触发的原因, 如果您还愿意提供解决方案, 不胜感激.

Answer 1

在启动createMainEditor()操作时，使用document.querySelector("#").content获取template标签的内容，然后用cloneNode(true)克隆出来，形成一个新ui。
然后将此ui插入到maindiv中，生成editor对象，此处onchange事件绑定到回调函数。
在header.js中，Header类接收ui和回调函数作为参数，通过ui获取sceneSelectorUi，然后将回调函数绑定到onchange事件，完成回调的操作。
在回调中，传入当前target.value来获取当前selector的值，并调用onSceneChange函数，完成对应的操作。
代码中存在问题是，template标签中没有用来获取它内容的content属性，所以无法获取它的内容，这将导致onchange事件无法正常绑定到回调函数中，从而无法触发其回调函数处理为了解决这个问题，可以将原生的template标签换成vue的template标签，使用v-for来遍历所需的数据，并且为事件绑定正确的回调函数，从而触发其处理函数。
以上内容引用ChatGPT