エラー：未知（約束）TypeError：文字列上のプロパティを作成できません...

Question

私のノードjsサーバーからajaxリクエストによってデータ（オブジェクトを含む配列）を取得し、それを私の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'という文字列はオブジェクトであり、yプロパティと値を設定したい。

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'); 
        }); 
}