Login

ponzo · 04-28-2018, 05:34 AM

Today I created a new installation of CI4, and gave it a new chance.

added two routes

PHP Code:
$routes->add('/home', 'Home::vueform');
$routes->post('/createjson', 'Home::createjson'); 

Created a simple view with CDN based sources instead of a previous full webpack

Code:
<!DOCTYPE html>

 <html>

 <head>

 <title>VUE CI4 test</title>

 <script src="https://unpkg.com/vue"></script>

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 </head>

 <body>

 <div id="app">

 {{info}}

 <input v-model="message" placeholder="edit me">

 <button @click="postform">Send!</button>

 </div>

 </body>

 <script>

 new Vue({

 el: '#app',

 data () {

 return {

 info: null,

 message:''

 }

 },

 methods:{

 postform:function(){

 axios

 .post('http://ci4test.test/createjson',{title:this.message})

 .then(response => (this.info = response.data))

 }

 },

 })

 </script>

 </html>

And in the controller Home.php two functions

PHP Code:
public function createjson()
 {
 if ( $this->request)
 {
 $json = $this->request->getJSON();
 return $this->respond($json->title);
 }
 }

 public function vueform()
 {
 echo view('Vueform');
 
 } 

It works!

I will check it again within my webpack config
Npm run dev runs at http://localhost:8080

In my previous example I added the code below to my view (for development), since it was rendering the GET response with a list of items without problems I thought CORS shouldnt be the problem here. But I will check again

Code:
<script src="http://localhost:8080/vendor.js"></script>

<script src="http://localhost:8080/app.js"></script>

Thanks