javascript - 为什么我的嵌套 Vue 模板文件不渲染?
问题描述
我有三个主要的 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>
地图.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>
地图.vue:
<template>
<div>
<h1>MAP TESTER</h1>
</div>
</template>
<script>
console.log("pagination")
export default {
}
</script>
<style scoped></style>
当我的应用程序加载时,我可以在浏览器中看到“这是地图呈现的页面”,这意味着 index.vue 文件很好,它的模板内容显示在 bowser 上。
但是,当 Map 组件从不渲染时,Pagination 也不会嵌套在 Map.vue 模板文件中。在我的控制台中,我可以看到“地图”和“分页”的控制台日志,这意味着这些文件正在被命中。但是,不会呈现与这两个文件关联的模板。borwser 没有显示任何错误。在“这是地图页面呈现的页面”下它只是空白。
这是我的 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 中的组件不渲染?任何帮助表示赞赏,谢谢!
解决方案
在index.vue.js
您的代码中使用 Map 组件(考虑更改它,因为它会影响Javascript Map 对象);它虽然没有注册它。
在使用 Webpack 等构建系统编写 Vue 应用程序时,您可以找到有关组件本地注册的文档。
在模块导出中index.vue
,注册Map
为组件。
<script>
import Map from './components/Map.vue';
export default {
components: {
Map
}
}
</script>
推荐阅读
- java - util.PSQLException:错误:列不存在(LEFT JOIN 和@Formula 的问题)
- c# - 如何授予使用c#创建目录的权限
- android - 有没有办法同步运行 Okhttps 请求?
- salesforce - 如何将 BAccount 设置为更新,以便销售人员集成能够发现有更新
- firebase - 没有为“用户”类型定义方法“then”
- python - 在 numpy 数组中查找最接近的值会产生 nan 输出
- javascript - 组件渲染后如何在reactJS中将数据从父级传递给子级
- r - 在仪表板中按日期排序/排列
- nosql - 如何为我的用例选择正确的键值对存储?
- git - 在 GitHub 和 Atom 中更改项目名称