在 vue-good 中显示来自 neo4j 数据库的数据 table

Question

我正在使用一种方法从我的 neo4j 检索数据 database.I 想将输出放入 vue-good table。这是我使用的方法

testQuery() {
  var _this=this
  // Get a session from the driver
  const session = this.$neo4j.getSession();
  var arr = [];
  var arr1 = [];
  // Or you can just call this.$neo4j.run(cypher, params)
  session
    .run("MATCH (Ind:Country {name: 'India', result: 'Winners'})<-[: TOP_SCORER_OF]-(n) RETURN n.name  AS data")
    .then(res => {
      this.data = res.records[0].get("data");
      
      console.log(res)
      //var x = JSON.parse(this.data);
       console.log(this.data)
      this.rows.push(this.data);
    })
    .then(() => {
      session.close();
    });
}

我这样称呼vue不错table -

<vue-good-table
      :columns="columns"
      :line-numbers="true"
      :search-options="{
      enabled: true,
      placeholder: 'Search this table'}"
      :pagination-options="{
      enabled: true,
      mode: 'records'}"
      styleClass="tableOne vgt-table"
      :selectOptions="{
      enabled: true,
      selectionInfoClass: 'table-alert__box' }"
      :rows="rows">
      <!-- <div slot="table-actions" class="mb-3">
      <b-button variant="primary" class="btn-rounded">
      Add Button
      </b-button>
      </div>-->

      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'button'">
          <a href>
            <i class="i-Eraser-2 text-25 text-success mr-2"></i>
            {{ props.row.button }}
          </a>
          <a href>
            <i class="i-Close-Window text-25 text-danger"></i>
            {{ props.row.button }}
          </a>
        </span>
      </template>
    </vue-good-table>

我已经这样定义了行和列 -

  columns: [
    {
      label: "Name",
      field: "name"
    },
    {
      label: "Created On",
      field: "createdAt",
      type: "date",
      dateInputFormat: "yyyy-mm-dd",
      dateOutputFormat: "MMM Do yy",
      tdClass: "text-left",
      thClass: "text-left"
    },
    {
      label: "Percent",
      field: "score",
      type: "percentage",
      tdClass: "text-left",
      thClass: "text-left"
    }
  ],
  rows: []

我在网上搜索了很多解决方案，但我一直收到这个错误

**TypeError:** Cannot create property 'vgt_id' on string 'shikar Dhawan'

人们通过说您需要将字符串转换为 js 对象来回答类似的问题，但后来我得到了这个错误-

vue-good-table.vue?0ccb:237 Uncaught (in promise) SyntaxError: Unexpected token s in JSON at position 0

有人能告诉我哪里错了吗？

Answer 1

看来您只是从数据库中检索名称，而且它是一个字符串。不是 JSON 字符串，因此解码它是无用的。要创建一个对象，这样：

this.rows.push({ name: this.data });

这会将具有 1 属性 name 和数据库值的对象推送到数组。

并不是说您只处理数据库中的 1 条记录。您需要一个循环来遍历所有记录。

在 vue-good 中显示来自 neo4j 数据库的数据 table

Displaying data from neo4j database in vue-good table

neo4j

vue.js

vue-good-table