Question

我有三个主要的Vue文件：

index.vue.js：

<template>
  <div class="tax-map-wrapper">
    <h1>this is the page the map renders</h1>
    <Map/>
  </div>
</template>

<script>
  import Map from './components/Map.vue';
  export default {

  }
</script>

Map.vue：

<template>
  <div>
    <h1>MAP TESTER</h1>
  </div> 
</template>

<script>
  console.log("map")
  import Pagination from './Pagination.vue';
  import { debounce } from '../helpers/util.js'
  export default {

  }
</script>

<style scoped></style>

Map.vue：

<template>
  <div>
    <h1>MAP TESTER</h1>
  </div>
</template>

<script>
  console.log("pagination")
  export default {
  }
</script>

<style scoped></style>

加载我的应用程序后，我可以在浏览器中看到“这是地图呈现的页面”，这意味着index.vue文件很好，其模板内容显示在Bowser上。

但是，当Map组件从不渲染时，分页也不会嵌套在Map.vue模板文件中。在我的控制台中，我可以看到“地图”和“分页”的控制台日志，这意味着这些文件受到了攻击。但是，与这两个文件关联的模板不会呈现。浏览器未显示任何错误。在“这是地图页面呈现的页面”下，它只是空白。

这是我的tax_map.js：

import Vue from 'vue';
import Map from '../tax_map/index.vue';

Vue.use(Map)
document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#tax-map-wrapper',
    render: h => h(Map)
  })

}）

这是我的tax_map.html.erb：

<%= javascript_pack_tag 'tax_map' %>
<div id="tax-map-wrapper"></div>

谁知道为什么index.vue中的组件不呈现？感谢您的任何帮助，谢谢！

Answer 1

在index.vue.js中，您的代码利用了Map组件（请考虑对此进行更改，因为它会遮盖Javascript Map object ）；它没有注册它。

在使用诸如Webpack之类的构建系统编写Vue应用程序时，您可以找到documentation on local registration of components。

在导出index.vue的模块中，将Map注册为组件。

<script>
  import Map from './components/Map.vue';
  export default {
    components: {
      Map
    }
  }
</script>

为什么我的嵌套Vue模板文件不渲染？

1 个答案: