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]"

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>

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

1 个答案: