为什么我的嵌套 Vue 模板文件不呈现？

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>

当我的应用加载时，我可以在浏览器中看到 "this is the page the map renders"，这意味着 index.vue 文件没问题，它的模板内容显示在浏览器上。

但是，当 Map 组件从不呈现时，嵌套在 Map.vue 模板文件中的分页也不呈现。在我的控制台中，我可以看到 "map" 和 "pagination" 的控制台日志，这意味着这些文件正在被攻击。但是，不会呈现与这两个文件关联的模板。浏览器没有显示任何错误。 "this is the page the map page renders".

下面就是一片空白

这是我的 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 中，您的代码使用了地图组件（考虑更改它，因为它会影响 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 模板文件不呈现？

Why don't my nested Vue template files render?

javascript

ruby-on-rails

vue.js

vuejs2

webpacker