vueでhttpリクエストを作成する際にエラーが発生しました

Question

Vueを使用してajax HTTPリクエストを作成しようとすると、コンソールに次のエラーが表示されます。私はVueに新しいので、私を助けてください。私は、ポストを使用してルートに移動するHTTPポストを使用しています。ポストはコントローラストア機能を呼び出します。

コンソールログにエラーは私のnew.vueがこれです。この

new.vue?79f8:48 Uncaught TypeError: Cannot read property 'post' of undefined 
    at VueComponent.store (eval at <anonymous> (app.js:93), <anonymous>:48:31) 
    at VueComponent.boundFn [as store] (eval at <anonymous> (app.js:86), <anonymous>:182:12) 
    at VueComponent.fileInputChange (eval at <anonymous> (app.js:93), <anonymous>:43:18) 
    at boundFn (eval at <anonymous> (app.js:86), <anonymous>:181:14) 
    at HTMLInputElement.invoker (eval at <anonymous> (app.js:86), <anonymous>:1823:18) 

です。私はあなたが、あなたが同じ機能を再利用することができ、かつ入力は、パラメータでなければなりませんので

// 
    // /** 
    // * First we will load all of this project's JavaScript dependencies which 
    // * includes Vue and other libraries. It is a great starting point when 
    // * building robust, powerful web applications using Vue and Laravel. 
    // */ 
    // 
    // require('./bootstrap'); 
    // window.Vue = require('vue'); 
    // 
    // /** 
    // * Next, we will create a fresh Vue application instance and attach it to 
    // * the page. Then, you may begin adding components to this application 
    // * or customize the JavaScript scaffolding to fit your unique needs. 
    // */ 
    // 
    // Vue.component('video-upload', require('./components/new.vue')); 
    // 
    // const app = new Vue({ 
    //  el: '#app', 
    // }); 

    import Vue from 'vue' 
    import New from './components/new.vue' 
    import VueResource from 'vue-resource' 



    // Vue.component('video-upload', require('./components/new.vue')); 

    Vue.use(VueResource); 

    new Vue({ 
     render(h) { 
      return h(New) 
     } 
    }).$mount('#video-upload') 

Answer 1

は、パラメータとしてルートを渡している

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Upload Video</div> 

        <div class="panel-body"> 
         <input type="file" name="video" id="video" @change="fileInputChange" v-if="!uploading"> 
         <div id="video-form" v-if="uploading && !failed"> 
          form 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     data(){ 
      return{ 
       uploading:false, 
       uploadingComplete:false, 
       failed:false, 
       title:'untitled', 
       description:null, 
       visibility:'private', 
      } 
     }, 
     methods:{ 
      fileInputChange(){ 
       this.uploading = true; 
       this.failed = false; 
       this.file=document.getElementById('video').files[0]; 
       this.store().then(()=>{ 
        //upload the video 
       }) 
      }, 
      store(){ 
       return this.$http.post('/video', { 
        title: this.title, 
        description: this.description, 
        visibility: this.visibility, 
        extension: this.file.name.split('.').pop() 
       }).then((response)=>{ 
        console.log(response.json()); 
       }); 
      } 
     }, 
     mounted() { 

     } 
    } 
</script> 

と私のapp.js

ここでのHTTP POSTを呼び出します投稿する（何もしない）

store(route, input) { 
      if(input != '') { 
       this.$http.post(route, input) 
       .then(resp => { 
        this.post = []; // empty your session post object 

      window.setTimeout(function(){ window.location = 
    resp.body.redirect },5); // redirect 
       }) 
      } 
     },