在单个 Vue 文件中调用时，Vue 组件中的某些元素未显示

Posted 2023-02-22

【中文标题】在单个 Vue 文件中调用时，Vue 组件中的某些元素未显示

【英文标题】：Some Elements in Vue components are not showing when called in a Single Vue File

【发布时间】：2022-01-07 12:17:31

【问题描述】：

我已经使用 Vue 2、Vuetify 和 Vue cli - 4.5.15 完成了我的组件设计。我尝试将它组合到单个 Vue 文件中，但组件没有显示 和其他一些元素。我不确定为什么会发生这类错误。我附上了 Component1 和 Component2 的代码以及 App.vue 文件的代码。

在控制面板中我不断收到错误提示

渲染错误：“TypeError: Cannot read properties of undefined (reading 'rtl')”

组件 1

<template>
  <div class="post-wrap">
    <div class="post-header">
        <img src="https://www.finetoshine.com/wp-content/uploads/2020/04/Beautiful-Girl-Wallpapers-New-Photos-Images-Pictures.jpg"  class="avator">
        <div class="post-header-info">
            <a class="location-link mintext"><v-icon small>mdi-map-marker</v-icon> BVB School, Thindal</a>
            <span style="float:right;margin-right: 10px;" class="mintext">Jun 21</span>
            <br>
            &nbsp;<div style="margin-top:6px;margin-left:1px;display:inline-block;font-size:16px;">Steve Jobs</div> 
            &nbsp;·<span class="mintext"> Attended a Seminar</span>
            <p>???? If you're tired of using outline styles for secondary buttons, a soft solid background based on the text color can be a great alternative.</p>
        </div>
    </div>
    <div class="align-straight">
      <img src="https://www.gizbot.com/images/2020-09/realme-7_159921061900.jpg" class="multi-img">
      <img src="https://www.gizbot.com/images/2020-09/realme-7_159921061900.jpg" class="multi-img">
    </div>
    <span class="attached-link"> + 2 images</span><br>
    <div class="align-straight">
      <div class="document-wrap" style="display: inline-block;">
        <v-icon dense>mdi-file-document</v-icon> document 
      </div>
      <div class="document-wrap" style="display: inline-block;">
        + 2 
      </div>
    </div>
    <div class="align-straight like-bar">
      <span><v-icon>mdi-thumb-up</v-icon></span>
      <span style="float:right;margin-right: 20px;"><v-icon>mdi-bookmark</v-icon></span>
      </div>
  </div>
</template>

<script>
export default 

</script>

组件 2

<template>
<div class="newpost-wrap">
  <v-form>
    <div class="newpost-title">What's up</div>
    <v-select label="Post Type" v-model="selectedPost" :items="postTypes" outlined></v-select>
    <v-textarea v-model="newPost" :counter="280" label="New Post" hint="Share your Achievement !" required outlined></v-textarea>
    <span class="update-link" @click="showAttach=!showAttach"><v-icon color="#3a7bd5">mdi-attachment</v-icon> Attach Files</span>
    <div class="newpost-icons" v-if="showAttach==true">
      <v-file-input  small-chips  multiple dense prepend-icon="mdi-wallpaper" accept="image/*" ></v-file-input>
      <v-file-input  small-chips  multiple dense prepend-icon="mdi-file-document" accept="document/pdf, document/docx"></v-file-input>
    </div>
    <div class="update-btn">Post</div>
  </v-form>
</div>
</template>

<script>
  export default 
    data: () => (
      showAttach: false,
      newPost: '',
      postType: null,
      selectedPost: 'Usual',
      postTypes: ['Seminar', 'Course', 'Project', 'Usual']
    )
  
</script>

App.vue

<template>
  <v-app >
      <NewPostBar />
      <UsualPost />
  </v-app>
</template>

<script>
import NewPostBar from '/fac/faculty/src/components/NewPostBar.vue'
import UsualPost from '/fac/faculty/src/components/UsualPost.vue';

export default 
  name: 'App',
  components: 
    NewPostBar,UsualPost
  ,
  data: () => (
  )
;
</script>

【问题讨论】：

将 Vuetify 安装为 Vue 插件的代码： import Vue from 'vue';从 'vuetify/lib/framework' 导入 Vuetify； Vue.use(Vuetify); export default new Vuetify( );

在 main.js 文件中... 代码： import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' Vue.config.productionTip = false new Vue( vuetify, render: h => h(App) ).$mount('#app')

感谢您的回复！！刚才有点解决了...发生的事情是我在初始化项目时没有安装路由器，所以出现了错误...现在我在创建项目时进行了路由器的初始化。现在该网站运行良好......！ ？？？？？？非常感谢@tony19 ????

【参考方案1】：

已解决：

希望这能回答类似的问题...

首先我初始化了一个不包含路由器的 Vue 项目，然后将其安装为插件......然后我收到了这个错误

所以我初始化了一个安装了路由器的 Fresh 项目...现在控制台中没有错误，并且项目工作正常

但我真的不知道为什么会发生这种情况

感谢@tony19 的回复，所以我一直在检查出了什么问题...