🐷
Axiosの動きサクッと確認
CDNの読み込み
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
axiosの読み込み
vueインスタンスのmountedに以下の内容を書き込む。
elには下記の内容から、#appを指定する。
data.jsonファイルには適当な文字列を入れておく。
mounted: function () {
var self = this;
axios
.get('data.json')
.then(function (res) {
self.items = res.data;
});
},
確認
<body>
<div id="app">
{{ items }}
</div>
</body>
余談
cakephp3のControllerメソッドを参照したいときは以下のようにする
/Controller/hogeController.php
public function hogefugaApi(){
$this->autoRender = false;
if($this->request->is('post')){
echo 'post';
}
echo 'not post';
}
/Template/Hoges/index.php
mounted: function () {
var self = this;
axios
.get('../hogefuga_api')
.then(function (res) {
self.items = res.data;
});
},
Discussion