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

【问题标题】：Vue.js import Array from App.vue in ComponentVue.js 从组件中的 App.vue 导入数组
【发布时间】：2020-04-01 05:56:27
【问题描述】：

我在将数组从 App.vue 文件导入组件时遇到问题。但首先我应该解释一下这个项目的目的。有一个组件（导航抽屉）和一个 App.vue 文件。 Navigation 抽屉里面有 vue 的 props，你可以在 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>

【问题讨论】：

试试:links="..." 或v-bind:links="..."。见vuejs.org/v2/guide/…。该内联数组也不会对您有任何帮助。我建议将其移至 App.vue 的 data 函数中。
您的数组也无效（这是在另一条评论中，但作者删除了它）。就像我说的，将其移至data 函数，例如data: () => ({ links: [{ title: 'Google', ... }, ... ] }) 并使用:links="links"

标签： javascript arrays vue.js vuejs2

【解决方案1】：

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

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

然后你应该使用 v-bind 告诉 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

【讨论】：

【解决方案2】：

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

【讨论】：

您的 link_array 与 OP 的一样无效 ?
答案的整个部分是他需要动态使用数组。

【解决方案3】：

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

提示：使用prop validation 来缓解此类问题

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

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

这应该可以解决您的问题。

【讨论】：