laravel - 使用单个模板完全从 JSON 数据中使用 Vue.js 编译多个数据表

Question

我正在寻找创建一个单一的 vue 模板来生成 40+ datatables，我将通过 API 传递不同的表定义。

我正在努力使用表定义中的键名动态提取表数据。

我试图使用绑定文本{{，v-text但我得到了同样的错误

JS

data() {
     return {
         tableColumns: [
          {
            columnName : "First Name",
            columnValue : "first_name",
            visible : true,
            align: "left"
             },
             {
              columnName : "Last Name",
              columnValue: "last_name",
              visible : true,
              align: "left"
              }],
             people : [],
           };
        }

刀

<table class="table table-sm table-hover table-striped">
      <thead>
        <tr>
          <th v-for="(tableColumn, index) in tableColumns" :key="index">
          @{{ tableColumn.columnName}}
          </th>
        </tr>
      </thead>
      <tbody>
      <tr v-for="(person, index) in people.data" :key="index">
          <td v-for="(tableColumn, indexColumn) in tableColumns" :key="indexColumn" >
            <p v-text="person.[tableColumn.columnValue]"></p>
          </td>
        <tr>
    </table>

错误：

invalid expression: Unexpected token [ in

    person.[tableColumn.columnValue]

  Raw expression: v-text="person.[tableColumn.columnValue]"

标签： laravelvue.jsdynamic

Answer 1

为了帮助将来可能会遇到这个问题的人，问题是我在哪里构建我的 vue 组件。我没有在我的 component.blade.php 中包含组件逻辑，而是创建了一个独立的 .vue 文件，并且成功了。

最终工作版本：

<template>
  <div class="container">
    <table class="table table-sm table-hover">
      <thead>
        <tr>
          <th v-for="(tableColumn, index) in tableColumns" :key="index">
          {{ tableColumn.columnName}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows.data">
            <td v-for="tableColumn in tableColumns" >
              {{row[tableColumn.columnValue]}}
            </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>