Vue.jsでデータが設定されていません

Question

Laravel 5.3とVue.jsを使用して簡単なフォーム検証をしようとしています。

Laravelコントローラ：

public function test(\Illuminate\Http\Request $request) 
    { 
     $this->validate($request, [ 
      'name' => 'required', 
      'date' => 'required' 
     ]); 
... 
    } 

Vueのデータ：

let app = new Vue({ 
     el: '#app', 

data: { 
     submitted: false, 
     errors: [], 
     post: { 
       name: '', 
       date: '', 
       }, 
}, 

Vueのポスト：

Vue.http.post('url', post).then((response) => { 
    // form submission successful, reset post data and set submitted to true 
    app.post = { 
     name: '', 
     date: '', 
    }; 

    // clear previous form errors 
    app.$set('errors', ''); 

    app.submitted = true; 

}, (response) => { 
    // form submission failed, pass form errors to errors array 
    console.log(response.data.name); //"The Name field is required." 
    app.$set('errors', response.data); // TypeError 
}); 

私は

TypeError: can't assign to properties of (new String("errors")): not an object

を取得しています

とapp.$set('errors', response.data);

どこが間違っていますか？

Answer 1

チェックvm.$set(object, key, value)、あなたはキーとしてresponse.dataを使用してに文字列「エラーを」プロパティを追加しようとしています。

正しい構文はapp.$set(app, 'errors', response.data)ですが、app.errors = response.dataも同様に機能するはずです。