vue-material mdAutocomplete inside电子-vue应用程序-设置问题

Question

我正在试验电子vue种子应用程序，并已将电子版本升级到8，并将vue升级到最新版本。我正在我的src/renderer/router/index.js中安装vue-material组件：

import Vue from 'vue'
import Router from 'vue-router'
import { MdButton, MdContent, MdTabs, MdAutocomplete } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'

Vue.use(Router)
Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)
Vue.use(MdAutocomplete)

然后，我将src/renderer/App.vue与

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'pdq-app'
  }
</script>

<style>

  @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap|Roboto:400,500,700,400italic|Material+Icons');

  html {
    font-family: 'Source Code Pro', monospace;
  }

</style>

我正在使用Command.vue组件在CommandLine.vue模板上绘制自动完成：

<template>
  <main>
    <main-menu></main-menu>
    <command></command>
  </main>
</template>

<script>
  import MainMenu from './MainMenu'
  import Command from './CommandLine/Command'

  export default {
    name: 'command-line',
    components: { MainMenu, Command },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      }
    }
  }
</script>

<style>

</style>

自动完成组件如下所示：

<template>
  <div>
    <md-autocomplete v-model="selectedCountry" :md-options="countries">
      <label>Country</label>
    </md-autocomplete>

    <md-autocomplete v-model="selectedEmployee" :md-options="employees" md-dense>
      <label>Employees</label>
    </md-autocomplete>
  </div>
</template>

<script>
  export default {
    name: 'AutocompleteStatic',
    data: () => ({
      selectedCountry: null,
      selectedEmployee: null,
      countries: [
        'Algeria',
        'Argentina',
        'Brazil',
        'Canada',
        'Italy',
        'Japan',
        'United Kingdom',
        'United States'
      ],
      employees: [
        'Jim Halpert',
        'Dwight Schrute',
        'Michael Scott',
        'Pam Beesly',
        'Angela Martin',
        'Kelly Kapoor',
        'Ryan Howard',
        'Kevin Malone',
        'Creed Bratton',
        'Oscar Nunez',
        'Toby Flenderson',
        'Stanley Hudson',
        'Meredith Palmer',
        'Phyllis Lapin-Vance'
      ]
    })
  }
</script>

问题是我不确定我在显示输入控件时遗漏了什么--它是不可见的。在呈现的超文本标记语言中有一个md-input标签，但是我似乎遗漏了一些绘制东西的依赖：

​

​

要绘制完整的自动完成，我会遗漏什么？

Answer 1

看起来我需要添加一些依赖项：MdField、MdMenu和MdList。在文档中很难看到这一点；我想如果我导入整个VueMaterial，这不会是一个问题。

import Vue from 'vue'
import Router from 'vue-router'
import {
  MdButton,
  MdCard,
  MdContent,
  MdTabs,
  MdAutocomplete,
  MdField,
  MdMenu,
  MdList
} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'

Vue.use(Router)
Vue.use(MdAutocomplete)
Vue.use(MdField)
Vue.use(MdMenu)
Vue.use(MdList)
Vue.use(MdButton)
Vue.use(MdCard)
Vue.use(MdContent)
Vue.use(MdTabs)

// export default new Router({
// ...