Question

对于我的应用程序，我有一个帮助按钮。帮助按钮必须显示一些在.html中设置的信息。

基于要导入正确的html文件的route.name，我得到了以下代码。

Dialog.vue

<template>
  <md-dialog :md-active.sync="status">
    <md-dialog-title>Help</md-dialog-title>
    <md-dialog-content>
      <div :v-html="textLoader"></div>
    </md-dialog-content>
    <md-dialog-actions>
      <md-button class="md-primary" @click="close">Close</md-button>
    </md-dialog-actions>
    {{this.textLoader}}
  </md-dialog>
</template>
<script>

export default {
  name: 'HelpDialog',
  props: ['status', 'text', 'name'],
  data: () => ({
    test: '',
    isHelpDialogVisible: false,
  }),
  methods: {
    close() {
      this.status = false;
      this.$emit('closeModal');
    },
  },
  computed: {
    textLoader() {
      return () => import(`../../${this.name}.html`).then(function (res) {
          console.log(res.default);
          return res.default;
      });
    },
  },
};
</script>

正如您在计算的“ textLoader”中看到的那样，导入是动态的，并且使用console.log获得正确的值。当我将'textLoader'放入v-html时，我得到了：

function(){return a("1738")("./".concat(e.name,".html")).then(function(e){return console.log(e.default),e.default})}

我在导入时是否有问题或执行此操作的正确方法是什么？感谢您的帮助！

动态导入html文件

0 个答案: