Vue JS - 使用 innerHTML 呈现的动态创建的组件不能绑定到事件

Question

我最近才开始深入研究 Vue JS - 到目前为止我很喜欢它。我现在面临一个问题，我正在尝试创建一个（非平凡的）table（使用 vue-good-table 插件），其中每个单元格都是它自己的一个组件。

阅读插件文档后，有人提到可以创建一个 HTML 列类型，您可以在其中使用原始 HTML（我猜）： https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#html

为了简化事情，我有一个 Vue 组件（称为 Dashboard2.vue），它包含 table 和名为 Test.vue

的子组件

我正在为每个相关单元格动态创建测试组件并将其分配给相关行单元格。因为我已经将列定义为 HTML 类型，所以我使用 innerHTML 属性从 Vue 组件中提取原始 HTML 。（关注本文https://css-tricks.com/creating-vue-js-component-instances-programmatically/）一切进展顺利，仪表板看起来正是我想要的样子，但是当单击每个测试组件内的按钮时，没有任何反应。

我怀疑因为我使用了内部HTML 属性它只是以某种方式跳过了 Vue even 处理程序机制，所以我有点卡住了。

这是相关组件部分：

Dashboard2.vue:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{enabled: true}"
      styleClass="vgt-table condensed bordered"
      max-height="700px"
      :fixed-header="true"
      theme="black-rhino">
    </vue-good-table>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
import { serverURL } from './Config.vue';
import Test from './Test.vue';

export default {
  name: 'Dashboard2',
  data() {
    return {
      jobName: 'team_regression_suite_for_mgmt',
      lastXBuilds: 7,
      builds: [],
      columns: [
        {
          label: 'Test Name',
          field: 'testName',
        },
      ],
      rows: [],
    };
  },
  methods: {
    fetchResults() {
      const path = `${serverURL}/builds?name=${this.jobName}&last_x_builds=${this.lastXBuilds}`;
      axios.get(path)
        .then((res) => {
          this.builds = res.data;
          this.builds.forEach(this.createColumnByBuildName);
          this.createTestsColumn();
          this.fillTable();
        })
        .catch((error) => {
          // eslint-disable-next-line no-console
          console.error(error);
        });
    },
    createBaseRow(build) {
      return {
        id: build.id,
        name: build.name,
        cluster: build.resource_name,
        startTime: build.timestamp,
        runtime: build.duration_min,
        estimatedRuntime: build.estimated_duration_min,
        result: build.result,
      };
    },
    addChildRows(build, children) {
      const row = this.createBaseRow(build);
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < build.sub_builds.length; i++) {
        const currentBuild = build.sub_builds[i];
        if (currentBuild.name === '') {
          this.addChildRows(currentBuild, children);
        } else {
          children.push(this.addChildRows(currentBuild, children));
        }
      }
      return row;
    },
    createColumnByBuildName(build) {
      this.columns.push({ label: build.name, field: build.id, html: true });
    },
    addRow(build) {
      const row = this.createBaseRow(build);
      row.children = [];
      this.addChildRows(build, row.children);
      this.rows.push(row);
    },
    createTestsColumn() {
      const build = this.builds[0];
      const row = this.createBaseRow(build);
      row.children = [];
      this.addChildRows(build, row.children);
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < row.children.length; i++) {
        this.rows.push({ testName: row.children[i].name });
      }
    },
    fillBuildColumn(build) {
      const row = this.createBaseRow(build);
      row.children = [];
      this.addChildRows(build, row.children);
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < row.children.length; i++) {
        const childBuild = row.children[i];
        const TestSlot = Vue.extend(Test);
        const instance = new TestSlot({
          propsData: {
            testName: childBuild.name,
            result: childBuild.result,
            runTime: childBuild.runtime.toString(),
            startTime: childBuild.startTime,
            estimatedRunTime: childBuild.estimatedRuntime.toString(),
          },
        });
        instance.$mount();
        this.rows[i] = Object.assign(this.rows[i], { [build.id]: instance.$el.innerHTML });
      }
    },
    fillTable() {
      this.builds.forEach(this.fillBuildColumn);
    },
  },
  created() {
    this.fetchResults();
  },
};
</script>

<style scoped>

</style>

Test.vue

<template>
    <div>
  <b-card :header="result" class="mb-2" :bg-variant="variant"
          text-variant="white">
    <b-card-text>Started: {{ startTime }}<br>
      Runtime: {{ runTime }} min<br>
      Estimated: {{ estimatedRunTime }} min
    </b-card-text>
    <b-button @click="sayHi" variant="primary">Hi</b-button>
  </b-card>
</div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    id: String,
    testName: String,
    build: String,
    cluster: String,
    startTime: String,
    runTime: String,
    estimatedRunTime: String,
    result: String,
  },
  computed: {
    variant() {
      if (this.result === 'SUCCESS') { return 'success'; }
      if (this.result === 'FAILURE') { return 'danger'; }
      if (this.result === 'ABORTED') { return 'warning'; }
      if (this.result === 'RUNNING') { return 'info'; }
      return 'info';
    },
  },
  methods: {
    sayHi() {
      alert('hi');
    },
  },
};
</script>

<style scoped>

</style>

我知道这是很多代码。具体相关部分（在 Dashboard2.vue 中）是 fillBuildColumn

再一次 - 我是 Vue JS 的新手 - 据说我的直觉告诉我我是这里做错了很多事。

任何帮助将不胜感激。

编辑:

通过丢失内部HTML 属性和 html 类型，我最终得到一个：

"RangeError: Maximum call stack size exceeded" thrown by the browser. Not sure what's causing it

Answer 1

我制作了一个CodeSandbox样本。我可能弄乱了数据部分。但它给出了这个想法。

fillBuildColumn(build) {
  const row = this.createBaseRow(build);
  row.children = [];
  this.addChildRows(build, row.children);
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < row.children.length; i++) {
    const childBuild = row.children[i];
// i might have messed up with the data here
    const propsData = {
      testName: childBuild.name,
      result: childBuild.result,
      runTime: childBuild.runtime.toString(),
      startTime: childBuild.startTime,
      estimatedRunTime: childBuild.estimatedRuntime.toString()
    };

    this.rows[i] = Object.assign(this.rows[i], {
      ...propsData
    });
  }
}

createColumnByBuildName(build) {
  this.columns.push({
    label: build.name,
    field: "build" + build.id //guessable column name
  });
}

<vue-good-table :columns="columns" :rows="rows">
  <template slot="table-row" slot-scope="props">
          <span v-if="props.column.field.startsWith('build')">
            <Cell
              :testName="props.row.testName"
              :build="props.row.build"
              :cluster="props.row.cluster"
              :startTime="props.row.startTime"
              :runTime="props.row.runTime"
              :estimatedRunTime="props.row.estimatedRunTime"
              :result="props.row.result"
            ></Cell>
          </span>
          <span v-else>{{props.formattedRow[props.column.field]}}</span>
        </template>
</vue-good-table>

这个想法是在模板中渲染组件并有条件地进行。给出可猜测的列名的原因是使用像 <span v-if="props.column.field.startsWith('build')"> 这样的条件。由于您只有 1 个静态字段，其余字段是动态的，您也可以使用 props.column.field !== 'testName'。我在渲染时遇到问题，我必须在全局注册 table 插件和 Cell 组件。

Vue JS - 使用 innerHTML 呈现的动态创建的组件不能绑定到事件

Vue JS - dynamically created components rendered with innerHTML cannot be bound to events

javascript

vue.js

vue-good-table