javascript - 字符串错误 : Uncaught (in promise) TypeError: Cannot create property . ..

Question

我正在尝试通过 ajax 请求从我的 Node js 服务器检索数据(包含对象的数组)并将其填充到我的 vue 实例中。

在以下行中我收到错误:

this.$set('tables', tables);

错误消息:

vue.common.js:834Uncaught (in promise) TypeError: Cannot create property '[{"name":"Test","description":"test","id":"58564cd5fdd4e76a09b1f848"},{"name":"Test","description":"test","id":"58564d04902af88009e020e8"},{"name":"test2","description":"teesten","id":"58564d68902af88009e020e9"}]' on string 'tables'

完整代码:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="page-header">
          <h1>Database management</h1>
        </div>
        <h2>Add table</h2>
        <p class="lead">Here you can add a table.</p>
        <form method="post">
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group">
                <label>Table name</label>
                <input v-model="table.name" placeholder="Table name" type="text" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group">
                <label>Table description</label>
                <textarea v-model="table.description" placeholder="Table description" class="form-control"></textarea>
              </div>
            </div>
          </div>
          <button @click.prevent="submit" type="submit" class="btn btn-default">Add table</button>
        </form>
      </div>
    </div>

    <div class="row" v-if="tables.length > 0">
      <div class="col-xs-12">
        <h2>Interact with tables</h2>
        <p class="lead">Here you can interact with your tables.</p>
        <table class="table">
          <thead>
          <tr>
            <th>Table</th>
            <th>Interact</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="table in tables">
            <td>
              {{ table.name }}
            </td>
            <td>
              <button type="button" class="btn btn-default">Enter</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  let table = {
    name: '',
    description: ''
  };

  module.exports = {
    data: function () {
      return {
        tables: [],
        table: table
      }
    },

    created: function () {
      this.getTables();
    },

    methods: {
      submit: function () {
        this.$http.post('/api/user/table', table, {
          emulateJSON: true
        }).then((response) => {
        });
      },

      getTables: function () {
        this.$http.get('/api/user/tables').then((response) => {
            console.log(JSON.stringify(response.body));
          let tables = JSON.stringify(response.body);
          this.$set('tables', tables);
        });
      }
    }

  }
</script>

Answer 1

从此处的文档来看，$set() 需要 3 个参数，而您提供了 2 个参数，它认为“tables”字符串是您要在其上设置属性的对象，并且值。

https://v2.vuejs.org/v2/api/#vm-set

该错误认为您正在尝试在字符串上设置非常长的属性名称。

而是 vue.$set(this,'tables',tables)

然后您将在当前对象上将一个名为tables的属性设置为数组tables。