从组件中的Vue.js从App.vue导入数组

Question

在将数组从App.vue文件导入组件时，我遇到了一个问题。但首先我要解释一下这个项目的目的。有一个组件(导航-抽屉)和一个App.vue文件。导航抽屉中有vue道具，您可以在App.vue文件中动态更改这些道具。现在，我的问题是组件没有正确导入数组。它只显示大约70或80个要点，但没有显示数组中的实际内容。

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>

Answer 1

正如每个人所解释的，您没有将Array传递给NavigationDrawer组件。目前，您还没有绑定Array，所以它只是字符串。

提示:使用支柱验证来缓解此类问题

要解决您的问题，只需使用V-绑定绑定它

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

这应该能解决你的问题。

Answer 2

首先，对象语法是错误的。在js中，您应该使用: not "=“在对象中声明属性。

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

然后，您应该使用v告诉vue links，它是一个JavaScript表达式，而不是字符串。

您可以这样直接声明链接。

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

你也可以用一种状态来做这个。

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

Answer 3

在您的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>