Javascript jQuery插件在.vue组件中不起作用
我正在为我在Laravel 5.3中的应用程序使用vue组件，我尝试将Laravel文件管理器集成到一个独立的按钮中，但这不起作用，当我点击“选择图像”按钮时，什么也没有发生，该组件需要jQuery init设置，如下所示：Javascript jQuery插件在.vue组件中不起作用,javascript,jquery,laravel-5,vue.js,vue-component,Javascript,Jquery,Laravel 5,Vue.js,Vue Component,我正在为我在Laravel 5.3中的应用程序使用vue组件，我尝试将Laravel文件管理器集成到一个独立的按钮中，但这不起作用，当我点击“选择图像”按钮时，什么也没有发生，该组件需要jQuery init设置，如下所示： $('.lfm-img').filemanager('image'); 我检查了.vue文件外部的组件，它工作正常，只有.vue文件内部不工作 这是vue组件 <template> <div class="modal fade"
$('.lfm-img').filemanager('image');
<template>
<div class="modal fade"
id="section-{{ section.id }}"
tabindex="-1"
role="dialog"
aria-labelledby="sectionLabel-{{ section.id }}">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="sectionLabel-{{ section.id }}">
{{ section.name }}
</h4>
</div>
<div class="modal-body">
<!-- Field List -->
<div v-if="editing != true">
<ul class="list-group">
<li class="list-group-item" v-for="field in fields">
<div class="clearfix">
<div class="pull-left">
<span>
{{ field.name }}
</span>
</div>
<div class="pull-right">
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
title="Editar valor"
@click="setField(field)">
<i class="fa fa-pencil-square fa-lg"
aria-hidden="true"></i>
</button>
</div>
</div>
</li>
</ul>
</div>
<!-- / Field List -->
<!-- Save value form -->
<div v-else>
<form @submit.prevent="updateFieldValue()">
<!-- Fields types -->
<div v-if="field.fieldtype_id === 1">
<div class="form-group vertical-align">
<label class="col-md-2 text-right">
Texto
</label>
<div class="col-md-10">
<input type="text"
v-model="value"
placeholder="Ingrese el valor"
class="form-control"
required="required">
</div>
</div>
<p><br></p>
</div>
<div v-if="field.fieldtype_id === 2">
<div class="form-group">
<textarea v-model="value"
placeholder="Ingrese texto"
class="form-control"
rows="5"
required="required">
</textarea>
</div>
<p><br></p>
</div>
<div v-if="field.fieldtype_id === 3">
<div class="form-group vertical-align">
<label class="col-md-3 text-right">
Seleccione una imagen
</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-btn">
<a data-input="value"
data-preview="holder"
class="btn btn-primary lfm-img">
<i class="fa fa-picture-o"
aria-hidden="true"></i> Seleccionar
</a>
</span>
<input id="value"
v-model="value"
class="form-control"
type="text"
name="value"
required="required">
</div>
</div>
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">
<p><br></p>
</div>
<!-- Actions -->
<div class="clearfix">
<div class="pull-right">
<button type="button"
class="btn btn-default"
data-dismiss="modal"
@click="finishEdit()">
Cancelar
</button>
<button type="submit"
class="btn btn-primary">
Guardar
</button>
</div>
</div>
</form>
</div>
<!-- / Save value form -->
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
@click="finishEdit()"
data-dismiss="modal">
Cerrar
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['section'],
data()
{
return {
fields: [],
field: [],
value: '',
loading: true, // start the spin loader
editing: false // show field list
}
},
ready()
{
this.loading = false; // stop the spin loader
this.getSectionFields();
},
methods:
{
startEdit()
{
this.editing = true;
},
finishEdit()
{
this.field = [];
this.value = '';
this.editing = false;
},
setField(field) {
this.field = field;
if (this.field.pivot.value !== null) {
this.value = this.field.pivot.value;
}
this.startEdit();
},
getSectionFields()
{
var self = this; // store "this." scope
// GET request
this.$http.get('/api/getSectionFields/' + this.section.id )
.then((response) => {
// sucess callback
var json = JSON.parse(response.body); // json parse
self.fields = json.fields;
this.loading = false; // stop the spin loader
}, function(response) {
// error callback
console.log(response);
});
},
updateFieldValue()
{
this.loading = true // start the spin loader
var params = { section : this.section.id,
field : this.field.id,
value : this.value
};
// POST request
this.$http.post('/api/update-value', params)
.then((response) => {
// sucess callback
this.getSectionFields();
this.finishEdit();
}, function(response) {
// error callback
console.log(response);
this.getSectionFields();
});
}
}
}
</script>
&时代；
{{section.name}}
-
{{field.name}
Texto
塞莱奇奥尼·乌纳·伊梅根
选择的
取消者
瓜达尔
塞拉
导出默认值{
道具：[“部分”]，
数据（）
{
返回{
字段：[]，
字段：[]，
值：“”，
加载：true，//启动旋转加载程序
编辑：false//显示字段列表
}
},
就绪（）
{
this.loading=false；//停止旋转加载程序
这是.getSectionFields（）；
},
方法：
{
startEdit（）
{
this.editing=true；
},
finishEdit（）
{
this.field=[]；
这个值=“”；
this.editing=false；
},
设置字段（字段）{
this.field=字段；
if（this.field.pivot.value！==null）{
this.value=this.field.pivot.value；
}
这个。启动它（）；
},
getSectionFields（）
{
var self=this；//存储“this.”范围
//获取请求
this.$http.get（'/api/getSectionFields/'+this.section.id）
。然后（（响应）=>{
//成功回调
var json=json.parse（response.body）；//json parse
self.fields=json.fields；
this.loading=false；//停止旋转加载程序
}，功能（回应）{
//错误回调
控制台日志（响应）；
});
},
updateFieldValue（）
{
this.loading=true//启动旋转加载器
var params={section:this.section.id，
字段：this.field.id，
值：这个值
};
//后请求
此.http.post（'/api/update value'，params）
。然后（（响应）=>{
//成功回调
这是.getSectionFields（）；
this.finishEdit（）；
}，功能（回应）{
//错误回调
控制台日志（响应）；
这是.getSectionFields（）；
initFilemanager()
{
this.$nextTick(function() {
$('.lfm-img').filemanager('image');
});
},