[Vuejs]-Vue.js import Array from App.vue in Component

by

-1👍

✅

As everyone explained you are not passing Array to NavigationDrawer component. Currently, you haven’t binded Array so it is just string.

TIP: Use prop validation to mitigate this kind of issues

To solve your issue all you have to do is bind it using v-bind

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

This should fix your issue.

1👍

First, your object syntax is wrong. In js you should using : not “=” to declare property in object.

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

And then you should using v-bind to tell vue links it’s a JavaScript expression rather than a string.

You can direct declaration links like that.

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

Also you can use a state to do that.

// 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

0👍

Try this below in your 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>

Leave a comment