• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
VueJs + CI 4

#6
Smile 
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! Idea

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
Reply


Messages In This Thread
VueJs + CI 4 - by ponzo - 04-26-2018, 01:54 PM
RE: VueJs + CI 4 - by albertleao - 04-26-2018, 02:43 PM
RE: VueJs + CI 4 - by ponzo - 04-26-2018, 03:00 PM
RE: VueJs + CI 4 - by kilishan - 04-26-2018, 08:32 PM
RE: VueJs + CI 4 - by ponzo - 04-27-2018, 10:43 AM
RE: VueJs + CI 4 - by ponzo - 04-28-2018, 05:34 AM
RE: VueJs + CI 4 - by MGatner - 09-27-2019, 04:59 PM
RE: VueJs + CI 4 - by donpwinston - 09-27-2019, 08:00 PM
RE: VueJs + CI 4 - by kilishan - 09-27-2019, 09:59 PM
RE: VueJs + CI 4 - by MGatner - 09-28-2019, 04:37 AM
RE: VueJs + CI 4 - by dave friend - 09-30-2019, 01:06 PM
RE: VueJs + CI 4 - by MGatner - 09-30-2019, 05:40 PM
RE: VueJs + CI 4 - by dave friend - 10-01-2019, 08:11 AM
RE: VueJs + CI 4 - by MGatner - 10-01-2019, 07:14 PM
RE: VueJs + CI 4 - by Paradinight - 10-02-2019, 06:46 AM
RE: VueJs + CI 4 - by albertleao - 10-02-2019, 07:09 AM
RE: VueJs + CI 4 - by ignitedcms - 10-02-2019, 08:08 AM
RE: VueJs + CI 4 - by MGatner - 10-02-2019, 08:37 AM
RE: VueJs + CI 4 - by albertleao - 10-02-2019, 08:18 PM

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.