layui上传组件在vue中失效,v-for无法让新增数据的上传按钮生效

提问 未结 0 194
admin1234
admin1234 2019-6-20
悬赏:20飞吻
版本:layui 浏览器:
	<!-- start -->
<div class="view-content" id="app1">
<div class="layui-tab layui-tab-brief " lay-filter="docDemoTabBrief">
<ul class="layui-tab-title ">
<li class="layui-this">{{chapter_name}}</li>
<input type="hidden" v-model="chapterId">
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table class="layui-table" lay-skin="line" >
<colgroup>
<col width="80">
<col width="320">
<col width="180">
<col width="100">
<col width="90">
<col>
</colgroup>
<thead>
<tr>
<th>排序</th>
<th>题目</th>
<th style="text-align:center;">是否免费</th>
<th>课件</th>
<th>视频</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-for="(item,index) in periodList">
<tr v-if="Object.keys(item).length" :key="index">
<td><input type="text" class="form-control" v-model="item.sort"></td>
<td><input type="text" class="form-control" v-model="item.period_name"></td>
<td style="color:red;text-align:center;">
<input type="radio" :name="item.id+'s'" v-model.number="item.is_free" value="0">付费
<input type="radio" :name="item.id+'s'" v-model.number="item.is_free" value="1">免费
</td>
<td>
<input type="hidden" v-model="item.doc_url">
<input type="hidden" v-model="item.is_doc">
<input type="hidden" v-model="item.doc_name">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm editfile " :class=`editfile${item.id}` @click="editUploadfile(item,$event);" v-if="item.doc_name">
<i class="layui-icon"></i>{{item.doc_name}}
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm editfile " :class=`editfile${item.id}` @click="editUploadfile(item,$event);" v-else>
<i class="layui-icon"></i>上传文件
</button>
</td>
<td>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>视频管理
</button>
</td>
<td>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="editPeriod(item)" >
<i class="layui-icon"></i>修改
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="delPeriod(item.id)" >
<i class="layui-icon "></i>
删除
</button>
</div>
</td>
</tr>
<tr v-else>
<td><input type="text" class="form-control" v-model="periodInfo.sort"></td>
<td><input type="text" class="form-control" v-model="periodInfo.period_name"></td>
<td style="color:red;text-align:center;">
<input type="radio" name="a" v-model.number="periodInfo.is_free" value="0">付费
<input type="radio" name="a" v-model.number="periodInfo.is_free" value="1">免费
</td>
<td>
<input type="hidden" v-model="periodInfo.doc_url">
<input type="hidden" v-model="periodInfo.doc_name">
<input type="hidden" v-model="periodInfo.is_doc">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="uploadfile" v-if="periodInfo.is_doc">
<i class="layui-icon"></i>{{periodInfo.doc_name}}
</button>
<button type="button" id="uploadfile" class="layui-btn layui-btn-primary layui-btn-sm " v-else>
<i class="layui-icon"></i>上传文件
</button>
</td>
<td>
<input type="hidden" v-model="periodInfo.is_video">
<input type="hidden" v-model="periodInfo.video_vid">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" >
<i class="layui-icon"></i>视频管理
</button>
</td>
<td>
<button type="button" class="layui-btn layui-btn-my " @click="addPeriod();">
保存
</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
<script type="text/javascript">
var el=new Vue({
el:'#app1',
data:{
courseId:0,
chapterId:0,
chapter_name:'',
periodInfo:{
'sort':0,
'course_id':0,
'chapter_id':0,
'period_name':'',
'is_free':0,
'is_video':0,
'video_vid':'',
'is_doc':0,
'doc_name':'22',
'doc_url':'',
},
periodList:[],
editFiles:{}
},
methods:{
// 获取章节列表
async getPeriodList(id){
let {data}=await this.$http.get('course/periodList/'+id);
// console.log(data)
if(data.code==200){
var a={}
a.course_id=this.courseId;
a.chapter_id=this.chapterId;
a.sort=data.data.length+1;
a.period_name='';
a.is_free=0;
a.is_video=0;
a.video_vid='';
a.is_doc=0;
a.doc_name='';
a.doc_url='';
this.periodInfo=a;
data.data.push({});
this.periodList=data.data;
}else{
this.periodList=[{}];
}
this.upload();
},
// 添加章节
async addPeriod(){
let {data}=await this.$http.post('course/period/'+this.chapterId,this.periodInfo);
if(data.code==200){
layer.msg('添加成功');
this.getPeriodList(this.chapterId);
}else{
layer.msg('添加失败');
}
},
// 编辑章节
async editPeriod(item){
let {data} =await this.$http.put('course/period/'+item.id,item);
if(data.code==200){
layer.msg('编辑成功');
}else{
layer.msg('添加失败');
}
},
delPeriod(id){
var that =this;
layer.confirm('确定删除吗',async function(){
let {data}= await that.$http.delete('course/period/'+id);
if(data.code==200){
layer.msg('删除成功');
that.getPeriodList(that.chapterId);
}else{
layer.msg('添加失败');
}
});
},
editUploadfile(item,ev){
var that=this;
layui.use('upload', function(){
var upload1 = layui.upload;
// console.log(upload1);
var id=ev.target.id;
// 修改课时 上传文件
upload1.render({
elem: id//绑定元素
,url: '/upload/courseware' //上传接口
,accept:'file'
,field:'courseware'
});
});
},
upload(){
var that=this;
layui.use('upload', function(){
var upload = layui.upload;
//添加课时 上传文件
var addFiles = upload.render({
elem: '#uploadfile' //绑定元素
,url: '/upload/courseware' //上传接口
,accept:'file'
,field:'courseware'
,done: function(res){
//上传完毕回调
if(res.code==0){
that.periodInfo.doc_url=res.data.doc_url;
that.periodInfo.doc_name=res.data.doc_name;
that.periodInfo.is_doc=1;
}else{
layer.msg('格式有误');
}
}
,error: function(){
}
});
});
}
},
created(){
var chapterId={$chapterId};
var courseId={$courseId};
var chapter_name='{$chapter_name}';
this.chapterId=chapterId;
this.courseId=courseId;
this.chapter_name=chapter_name;
this.getPeriodList(chapterId);
},
updated(){
element.on('tab(docDemoTabBrief)', function(data){
});
layui.use('upload', function(){
console.log(3)
var upload1 = layui.upload;
// 修改课时 上传文件
upload1.render({
elem: '.editfile' //绑定元素
,url: '/upload/courseware' //上传接口
,accept:'file'
,field:'courseware'
});
});
}
})


// layui.use('upload', function(){
// console.log(3)
// var upload1 = layui.upload;
// // 修改课时 上传文件
// upload1.render({
// elem: '.editfile' //绑定元素
// ,url: '/upload/courseware' //上传接口
// ,accept:'file'
// ,field:'courseware'
// });
// });
</script>
回帖
  • 消灭零回复