I have just finished creating my components using Vue 2, Vuetify, and Vue cli - 4.5.15. I attempted to combine them into a Single Vue file but encountered issues with the components not displaying <v-icons>, <v-textfield>, and some other elements. It's puzzling why these errors are occurring. The code for Component1, Component2, and App.vue is provided below:
Furthermore, in the Control Panel, I keep receiving an error message that says
Error in render: "TypeError: Cannot read properties of undefined (reading 'rtl')"
Component 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" alt="" class="avatar">
<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>
<div style="margin-top:6px;margin-left:1px;display:inline-block;font-size:16px;">Steve Jobs</div>
·<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>Component 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>