2017-10-11 1 views
1

Vue를 사용하여 ajax HTTP 요청을 만들려고하면 콘솔에 다음 오류가 표시됩니다. 나는 Vue에 처음 왔기 때문에 나를 도와주세요. 나는 포스트를 사용하여 라우트로 이동하기 위해 HTTP 포스트를 사용하는데,이 포스트는 컨트롤러 스토어 함수를 호출한다.vue에서 http 요청을 만들 때 오류가 발생했습니다.

콘솔 로그에 오류가이

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) 

내 new.vue이입니다. 당신이, 내가 여기에 HTTP 게시

<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는 동일한 기능을 다시 사용할 수 있도록

// 
    // /** 
    // * 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') 
+0

[vue-resource] (https://github.com/pagekit/vue-resource)를 사용하고 있습니까? 일반 Vue에는 '$ http'멤버가 없습니다. –

+0

예 vue-resource를 사용하고 있습니다. – PRASHANT

+0

이 오류는'$ http'가 정의되지 않았다고 말합니다. 나는'이'가 틀린 어떤 이유도 보지 않는다, 그러나 저것은 다음에 볼 것이다 곳에이다. –

답변

0

가 매개 변수로 경로를 통과하고, 입력은 매개 변수를해야한다 게시를 시도합니다 (아무것도 표시하지 않음)

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 
       }) 
      } 
     }, 
+0

변경했지만 동일한 오류 – PRASHANT

관련 문제