javascript - 如何从 javascript 函数调用 vue 方法?
问题描述
我正在尝试从 javascript 函数调用 vue 方法,但无法使其工作。我试图调用的方法是app.onChangePlant(val)
事实证明没有调用该值。
是不是因为我声明javascript函数时vue还不可用?
这是我收到的错误
plant-consumer:222 Uncaught TypeError: app.onChangePlant is not a function
at onChangePlantSelect (plant-consumer:222)
at HTMLSelectElement.onchange (plant-consumer:399)
at Object.trigger (app.js:14973)
at HTMLSelectElement.<anonymous> (app.js:15045)
at Function.each (app.js:6863)
at jQuery.fn.init.ea
代码:
<script type="module" defer>
const setting = {
url: {
findUsage: "{{ route('admin.plant-consumer.find-usage') }}",
usageCsvDownload: "{{ route('admin.plant-consumer.usage-csv-download') }}",
},
date: {
date_default: moment("{{ $defaultDate }}", 'YYYY/MM/DD').toDate()
}
};
const app = new Vue({
el: '#app',
data: {
url: setting.url,
plantId: '',
isLoading: false,
rangeFilter: 'daily',
byMonth: false,
csvDownloadUrl: '',
date: setting.date.date_default,
month: setting.date.date_default,
// datepicker用設定
DatePickerFormat: 'yyyy/MM/dd',
MonthPickerFormat: 'yyyy/MM',
disabledDates: {
from: new Date()
},
ja_vdp: vdp_translation_ja.js
},
components: {
'vuejs-datepicker': vuejsDatepicker
},
watch: {
rangeFilter: function () {
this.byMonth = this.rangeFilter === 'monthly';
this.getData(1);
},
},
methods: {
onChangePlant: function(event) {
this.plantId = event.target.value;
this.getData(1);
},
onChangeDate: function () {
this.getData(1);
},
onChangeMonth: function () {
this.getData(1);
},
getData: function(page) {
let that = this;
let date = that.date;
that.isLoading = true;
that.csvDownloadUrl = '';
if (that.byMonth) {
date = that.month;
}
if(that.plantId && ((date)))
{
let data = {
plant : that.plantId,
date : that.formatDateForRequest(date),
byMonth: that.byMonth,
page : page,
};
let url = that.url.usageCsvDownload
+ '?plant=' + data.plant
+ '&date=' + data.date
+ '&byMonth=' + data.byMonth;
// console.log(url);
$.ajax(
{
url: that.url.findUsage,
type: "get",
datatype: "html",
data: data,
cache: false
}).done(function(data){
$("#consumer_table_generate").empty().html(data);
that.csvDownloadUrl = url;
}).fail(function(jqXHR, ajaxOptions, thrownError){
alert('No response from server');
}).always(function() {
that.isLoading = false;
});
}
else
{
$("#consumer_ratio_body").empty();
that.isLoading = false;
}
}
},
mounted: function () {
let vueObj = this;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).on('click', '.pagination a', function(event)
{
event.preventDefault();
let $this = $(this);
$('#consumer_table_generate li').removeClass('active');
$this.parent('li').addClass('active');
var page = $this.attr('href').split('page=')[1];
vueObj.getData(page);
});
}
});
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
</script>
<script>
function onChangePlantSelect(val) {
console.log(val);
app.onChangePlant(val);
};
</script>
解决方案
const App = {
data: {
url: setting.url,
plantId: '',
isLoading: false,
rangeFilter: 'daily',
byMonth: false,
csvDownloadUrl: '',
date: setting.date.date_default,
month: setting.date.date_default,
// datepicker用設定
DatePickerFormat: 'yyyy/MM/dd',
MonthPickerFormat: 'yyyy/MM',
disabledDates: {
from: new Date()
},
ja_vdp: vdp_translation_ja.js
},
components: {
'vuejs-datepicker': vuejsDatepicker
},
watch: {
rangeFilter: function () {
this.byMonth = this.rangeFilter === 'monthly';
this.getData(1);
},
},
methods: {
onChangePlant: function(event) {
this.plantId = event.target.value;
this.getData(1);
},
onChangeDate: function () {
this.getData(1);
},
onChangeMonth: function () {
this.getData(1);
},
getData: function(page) {
let that = this;
let date = that.date;
that.isLoading = true;
that.csvDownloadUrl = '';
if (that.byMonth) {
date = that.month;
}
if(that.plantId && ((date)))
{
let data = {
plant : that.plantId,
date : that.formatDateForRequest(date),
byMonth: that.byMonth,
page : page,
};
let url = that.url.usageCsvDownload
+ '?plant=' + data.plant
+ '&date=' + data.date
+ '&byMonth=' + data.byMonth;
// console.log(url);
$.ajax(
{
url: that.url.findUsage,
type: "get",
datatype: "html",
data: data,
cache: false
}).done(function(data){
$("#consumer_table_generate").empty().html(data);
that.csvDownloadUrl = url;
}).fail(function(jqXHR, ajaxOptions, thrownError){
alert('No response from server');
}).always(function() {
that.isLoading = false;
});
}
else
{
$("#consumer_ratio_body").empty();
that.isLoading = false;
}
}
},
mounted: function () {
let vueObj = this;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).on('click', '.pagination a', function(event)
{
event.preventDefault();
let $this = $(this);
$('#consumer_table_generate li').removeClass('active');
$this.parent('li').addClass('active');
var page = $this.attr('href').split('page=')[1];
vueObj.getData(page);
});
}
}
const app = Vue.createApp(App)
const vm = app.mount('#blog-posts-demo')
vm.remove(123456)
//通过这种方式,您可以保证应用程序在您调用时已正确安装
推荐阅读
- php - DOMPDF 无法在 codeigniter 中的实时服务器上运行
- apache-spark - Spark SQL 2.4.3 不支持“INTERVAL”类型 - 什么是解决方法?
- python - Python 中 Azure Functions 的 Blob 名称模式
- php - 如何使用 php 建立 netezza 数据库连接
- javascript - 使用 google-signin 成功登录后如何重定向
- android - 如何从我的 android 项目中删除lazyconfigurationusagecontext?
- sparse-matrix - 使用 MKL 库的稀疏矩阵乘法
- jasper-reports - 如何为 json 源正确添加交叉表?
- sql - 如何根据另一列的值得出一列的值?
- angular - 角度 8 路由默认空不重定向到登录模块