Блог

Главная - Вопросы по программированию - Как я могу передать массив компоненту Vue?

Как я могу передать массив компоненту Vue?

#vue.js #vuejs2 #vue-component

#vue.js #vuejs2 #vue-компонент

Вопрос:

Я пытаюсь передать массив компоненту 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>

Комментарии:

1. Используйте синтаксис привязки для отправки необработанных выражений, объектов и массивов: :column=... или v-bind:column=... (обратите внимание на добавление : )

2. Пожалуйста, ответьте на вопрос, чтобы я мог пометить его как правильный.

Ответ №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>

Ответ №2:

Вы можете передать массив в prop

 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>