Vue. js Импорт объектов - PullRequest
Новая
       7

Vue. js Импорт объектов

0 голосов
/ 27 марта 2020

У меня проблема с импортом объектов из файла приложения. 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;">&#9776;</span>
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</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=…} ]"

Не знаю, как это сделать ... Кто-нибудь может помочь?

Спасибо.

1 Ответ

1 голос
/ 27 марта 2020

Вы уже достаточно близки к ответу. Измените = на :, чтобы значения были окружены ' вместо ", чтобы у вас был список объектов 

<navigation-drawer v-bind:links="[ {title:'Google', link:'www.google.ch'} , {title:'Youtube', link:'www.youtube.com'} , {title:…, link:…} ]"

Тогда реквизиты ящика навигации выглядят следующим образом: 

props: {
    links: Array
},

и html проходит по ссылкам с шаблоном v-for и : 

<div class="navigationdrawer">
    <span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">&#9776;</span>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>
        <template v-for=v-for="(link, index) in links">
            <a v-bind:href="link.link"  :key="index">{{ link.title}}</a>
        </template>
    </div>
</div>
...