Почему мои вложенные файлы шаблонов Vue не отображаются? - PullRequest
Новая
       10

Почему мои вложенные файлы шаблонов Vue не отображаются?

0 голосов
/ 02 ноября 2018

У меня есть три основных файла 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 никогда не рендерится, 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 не отображаются? Любая помощь приветствуется, спасибо!

1 Ответ

0 голосов
/ 02 ноября 2018

В index.vue.js ваш код использует компонент Map ( рассмотрите возможность его изменения, поскольку он затеняет Javascript Map * ); это не регистрирует это все же.

Вы можете найти документацию по локальной регистрации компонентов при использовании систем сборки, таких как Webpack, для написания приложений Vue.

В модуле экспорта для index.vue зарегистрируйте Map в качестве компонента. 

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