Question

我正在尝试将数组传递给Vue组件以构建表，但是我收到一条错误消息，提示我正在传递字符串而不是数组。

组件：

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in items" :key="index">
                    <td v-for="(column, indexColumn) in columns" :key="indexColumn">{{item[column]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        props: {
            column: Array,
            item: Array,
        },
    }
</script>

我如何调用该组件：

<nexdatatable column="['a','b']" item="['a','b']"></nexdatatable>

Answer 1

一些错误

<th v-for="(column, index) in columns" :key="index"> {{column}}</th>

在 for 循环中，你的变量名是 columns 但 prop 数组名是 column

column: Array,

应该是一样的

同样的物品错误

 <tr v-for="(item, index) in items" :key="index">

items 未在 prop 中定义

道具应该是

props: {
         columns: Array,
         items: Array,
       },

现在像这样调用组件（您可以使用 :cloumns 或 v-bind:cloumns）

<nexdatatable v-bind:columns="['a','b']" v-bind:items="['a','b']"></nexdatatable>

Answer 2

您可以将数组传递给道具

const app = new Vue({
 data(){
     return {
     columnArray: ['a','b'],
     itemArray: ['a','b'],
     };
 },
  methods: {
    confirm(){
    alert('hello');
    }
  }
})
app.$mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<nexdatatable :column="columnArray" :item="itemArray"></nexdatatable>
</div>

如何将数组传递给Vue组件？

2 个答案: