как исправить Не удалось смонтировать компонент: шаблон или функция рендеринга не определены в vue - PullRequest
Новая
       15

как исправить Не удалось смонтировать компонент: шаблон или функция рендеринга не определены в vue

0 голосов
/ 11 января 2020

Я пытаюсь записать компонент в vue, но застрял в проблеме: Не удалось смонтировать компонент: шаблон или функция визуализации не определены. Я пробовал некоторые разрешения, такие как добавление defalut при импорте компонента, но они не работают. Код моего компонента 100 split-pane.vue


<template>
  <div class="split-pane-wrapper">
    <div class="pane pane-left"
         :style="{width:leftOffsetPre}">
      <button @click="change">改变</button>
    </div>
    <div class="pane-trigger-con"
         :style="{left:triggerLeft,width:`${triggerWidth}px`}"></div>
    <div class="pane pane-right"
         :style="{left:leftOffsetPre}"> right</div>
  </div>
</template>

<script>
export default {
  name: 'SplitPane',
  props: {
    triggerWidth: {
      type: Number,
      default: 8
    }
  },
  data () {
    return {
      leftOffset: 0.3,
    };
  },
  computed: {
    leftOffsetPre () {
      return `${this.leftOffset * 100}%`;
    },
    triggerLeft () {
      const left = `calc(${this.leftOffset * 100}% - ${this.triggerWidth / 2}px)`;
      return left;
    }
  },
  methods: {
    change () {
      this.leftOffset -= 0.02;
    }
  }
};
</script>

<style lang="less" scoped>
.split-pane-wrapper {
  height: 100%;
  background-color: red;
  position: relative;
  .pane {
    position: absolute;
    top: 0;
    height: 100%;
    &-left {
      width: 30%;
      background-color: antiquewhite;
    }
    &-right {
      right: 0;
      bottom: 0;
      left: 30%;
      background-color: blue;
    }
    &-trigger-con {
      height: 100%;
      background-color: red;
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
}
</style>

Приложение. vue, h1 отображается, но разделенная панель отсутствует. 

<template>
  <div id="app">
    <h1>hello SplitPane</h1>
    <split-pane/>
  </div>
</template>

<script>
import SplitPane from "./components/split-pane";
export default {
  name: "App",
  components: {
    SplitPane
  }
};
</script>

завершить проект в codesandbox

1 Ответ

2 голосов
/ 11 января 2020

Вы не можете комментировать шаблон HTML как файл JS. Вы должны использовать комментарии в виде простого HTML файла, как показано ниже: 

 <!-- 
 - @file
 - @author JackZhoumine <jackzhoumine@gmail.com>
 -->

вместо 

/**
* @file 
* @author JackZhoumine <jackzhoumine@gmail.com>
*/

только внутри <script> можно использовать // или /**/, потому что там вы пишете js синтаксис.

...