参考：
一:可能是最好的 Vue 入门教程（7）Vue Ajax 的简单使用
一:使用vue.js写一个tab选项卡
image
编辑视图文件，引入相关库:demovueaxios.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="UTF-8">
<meta name="_token" content="{{ csrf_token() }}"/>
<title>Title</title>
<style>
.active {
color: red
}
</style>
</head>
<body>
<div id="tab">
<div>
@{{ active }}
</div>
<ul>
<li v-for="(item,index) in items" @click="toggle(index,item.view)"
:class="{active:active==index}">@{{item.text}}</li>
</ul>
<div>
@{{contents[active].text}}
</div>
<ul v-for="task in tasks">
<li>@{{ task.title }}</li>
<li>@{{ task.excerpt }}</li>
</ul>
<!-- <component :is="currentView"></component> -->
</div>
<script>
var tab = new Vue({
el: '#tab',
data: {
type: 2,
active: 0,
currentView: 'child3',
items: [
{text: '全部', view: 'child1'},
{text: 'ty1', view: 'child2'},
{text: 'ty2', view: 'child3'},
{text: 'ty3', view: 'child4'},
{text: 'ty4', view: 'child5'}
],
contents: [
{text: 'this is child0'},
{text: 'this is child1'},
{text: 'this is child2'},
{text: 'this is child3'},
{text: 'this is child4'},
],
tasks: [],
},
created: function () {
// `this` 指向 vm 实例
axios.get('/demoaxios?da=0')
.then(response => this.tasks = response.data)
},
methods: {
toggle(i, v){
this.active = i
this.currentView = v
this.type=i
axios.get('/demoaxios?da='+this.type)
.then(response => this.tasks = response.data)
}
},
})
</script>
</body>
</html>
控制器代码：
{
自己在控制器引入视图demovueaxios.blade.php
}
public function gettype($type)
{
$obj = \DB::table('articles')->select('id', 'title', 'excerpt')->where('type',$type)->get();
$array = json_decode(json_encode($obj), true);
return $array;
}
public function demoaxios(Request $request)
{
$da = $request->input('da');
$articles = $this->gettype($da);
return $articles;
}
路由：
Route::any('demoajax', 'blog\BlogindexController@demoajax');
Route::any('demoaxios', 'blog\BlogindexController@demoaxios');
网友评论