Mam problem z importowaniem tablicy z pliku App.vue do komponentu. Ale najpierw powinienem wyjaśnić cel tego projektu. Jest komponent (szuflada nawigacji) i plik App.vue. Szuflada nawigacji zawiera rekwizyty vue, które możesz dynamicznie zmieniać w pliku App.vue. Teraz mój problem polega na tym, że komponent nie importuje poprawnie tablicy. Pokazuje tylko około 70 lub 80 punktorów, ale nie pokazuje rzeczywistej zawartości z tablicy.

App.vue

<template>
  <div id="app">
    <navigation-drawer links= "[ {title='Google' , link='https://www.google.ch' },{ title='Youtube' ,link='https://www.youtube.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>

        <ul v-for="(link, index) in links" v-bind:key="index">
            <li>{{ link.title }}</li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    name: 'NavigationDrawer',
    props: {
        links: Array
 },

 methods: {
     openNav() {
         document.getElementById('mySidenav').style.width = '15%'
         },

    closeNav() {
        document.getElementById('mySidenav').style.width = '0%'
        }
    }
 }

</script>
0
RandomName142 1 kwiecień 2020, 08:56

3 odpowiedzi

Najlepsza odpowiedź

Jak wszyscy wyjaśniali, nie przekazujesz tablicy do komponentu NavigationDrawer. Obecnie nie powiązałeś Array, więc jest to tylko łańcuch.

WSKAZÓWKA: użyj weryfikacji propozycji, aby złagodzić tego rodzaju problemy

Aby rozwiązać problem, wszystko, co musisz zrobić, to związać go za pomocą v-bind

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

To powinno rozwiązać problem.

-1
JD Solanki 1 kwiecień 2020, 06:57

Po pierwsze, twoja składnia obiektu jest nieprawidłowa. W js powinieneś używać : nie "=" do deklarowania własności w obiekcie.

[ {title='Google' , link='https://www.google.ch' },{ title='Youtube' ,link='https://www.youtube.com' } ]

A potem powinieneś użyć v-bind, aby powiedzieć vue links, że jest to wyrażenie JavaScript, a nie ciąg.

Możesz tak kierować linkami do deklaracji.

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

Możesz także użyć do tego stanu.

// template
<navigation-drawer :links="links"/>
// script
data() {
  return {
    links: [
      { title: "Google", link: "https://www.google.ch" },
      { title: "Youtube", link: "https://www.youtube.com" }
    ]
  };
}

https://codesandbox.io/s/sparkling-wave-19evo

1
Yuxino 1 kwiecień 2020, 06:46

Spróbuj tego poniżej w swoim App.vue

<template>
  <div id="app">
    <navigation-drawer :links="link_array"
    />

    <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,
      },
    data(){
      return {
       link_array : "Your Array"   < -----------   
       } 
    }
</script>
0
Abhishek Kulkarni 1 kwiecień 2020, 06:16