У меня проблема с импортом объектов из файла приложения. vue в компонент. Но сначала я должен объяснить цель этого проекта. Там есть компонент (навигационный ящик) и файл приложения. vue. Ящик навигации содержит vue реквизитов, которые вы можете динамически изменять в файле приложения. vue. Проблема в том, что я могу использовать только столько ссылок, сколько имеется в файле Navigation-Drawer.
Я хотел бы отредактировать его, чтобы использовать столько ссылок, сколько мне нужно, даже без необходимости откройте файл Navigation-Drawer. vue. Прежде чем я go более подробно, вот файлы с реквизитом и ограниченным количеством ссылок:
Приложение. vue
<template>
<div id="app">
<navigation-drawer
name1="TFBern"
name2="Stackoverflow"
name3="YouTube"
name4="Google"
link1="https://vuejs.org"
link2="https://stackoverflow.com"
link3="https://youtube.com"
link4="https://google.com"
/>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import NavigationDrawer from './components/Navigation-Drawer.vue'
export default {
name: 'App',
components: {
HelloWorld,
NavigationDrawer
}
}
</script>
Navigation-Drawer. vue
<template>
<div class="navigationdrawer">
<span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">☰</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" @click="closeNav">×</a>
<a v-bind:href="link1">{{ name1 }}</a>
<a v-bind:href="link2">{{ name2 }}</a>
<a v-bind:href="link3">{{ name3 }}</a>
<a v-bind:href="link4">{{ name4 }}</a>
</div>
</div>
</template>
<script>
export default {
name: 'NavigationDrawer',
props: {
name1: String,
name2: String,
name3: String,
name4: String,
link1: String,
link2: String,
link3: String,
link4: String
},
methods: {
openNav() {
document.getElementById('mySidenav').style.width = '15%'
},
closeNav() {
document.getElementById('mySidenav').style.width = '0%'
}
}
}
</script>
Теперь я хотел создать объект js, который может импортировать ссылки из приложения. vue в ящик , Примерно так:
<navigation-drawer links="[ {title="Google", link="www.google.ch"} , {title="Youtube", link="www.youtube.com"} , {title=…, link=…} ]"
Не знаю, как это сделать ... Кто-нибудь может помочь?
Спасибо.