Error: Uncaught (in promise) TypeError: Cannot create property ... on string

Question

我正在尝试通过 ajax 请求从我的节点 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://vuejs.org/v2/api/#vm-set

该错误认为您正试图在字符串上设置一个很长的属性名称。

rather do vue.$set(this,'tables', tables)

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

Answer 2

以上答案也可以正常工作。

尝试直接给你的变量赋值并检查。

示例：

this.tables = tables

示例代码

data() : {
   return {
          participants: []
   };
},
...........
methods: {
this.$http.get('/list/participants').then((response) => {
                      console.log(response.body);
                      this.participants = response.body;
                  }, (response) => {
                      console.log('Something wrong');
                  });
 }

Error: Uncaught (in promise) TypeError: Cannot create property ... on string

Error: Uncaught (in promise) TypeError: Cannot create property ... on string

javascript

vue.js

vue-component