setInlineProgress 未定义错误 FrameWork7-vue
setInlineProgress is not defined error FrameWork7-vue
我正在尝试根据文档实现进度条。
这里我找了几个例子,函数是在methods对象中设置的。
我确实声明了该函数,但是当我尝试使用它时却提示该函数未定义。我什至不能在里面打印 console.log ,所以这个函数根本没有执行。
我很乐意听到一些建议。谢谢
<template id="page-highpth">
<f7-page>
<f7-navbar>
<f7-nav-left title="Form" back-link="" sliding>
<f7-link back-link="Back" ></f7-link>
</f7-nav-left>
<f7-nav-center sliding>High or rising PTH</f7-nav-center>
<f7-nav-right>
<f7-link icon="icon-bars" open-panel="right"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block strong>
<p><f7-progressbar :progress="10" id="demo-inline-progressbar"></f7-progressbar></p>
<f7-segmented raised>
<f7-button @click="setInlineProgress(10)">10%</f7-button>
<f7-button @click="setInlineProgress(30)">30%</f7-button>
<f7-button @click="setInlineProgress(50)">50%</f7-button>
<f7-button @click="setInlineProgress(100)">100%</f7-button>
</f7-segmented>
</f7-block>
</f7-page>
</template>
app.js
var app = new Vue({
el: '#app',
methods: {
toHomeScreen(){
this.$f7.getCurrentView().router.back({ pageName: 'home-page', force: true});
this.$f7.closePanel();
},
setInlineProgress(value){
const self = this;
const app = self.$f7;
console.log(value);
app.progressbar.set('#demo-inline-progressbar', value);
}
},
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: [
{
path:'/',
name: 'home'
}
,
{
path: '/education/',
component: 'page-education'
},
{
path: '/ckdmbddef/',
component: 'page-mbddef'
},
],
}
});
好的,大约 6 小时后,我终于意识到要访问该函数,我需要引用它。
var app = new Vue({...blah});
我所要做的就是:在我的代码中使用 app.setInlineProgress(),而不是 setInlineProgress();
希望这对某人有用。
我正在尝试根据文档实现进度条。 这里我找了几个例子,函数是在methods对象中设置的。
我确实声明了该函数,但是当我尝试使用它时却提示该函数未定义。我什至不能在里面打印 console.log ,所以这个函数根本没有执行。 我很乐意听到一些建议。谢谢
<template id="page-highpth">
<f7-page>
<f7-navbar>
<f7-nav-left title="Form" back-link="" sliding>
<f7-link back-link="Back" ></f7-link>
</f7-nav-left>
<f7-nav-center sliding>High or rising PTH</f7-nav-center>
<f7-nav-right>
<f7-link icon="icon-bars" open-panel="right"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block strong>
<p><f7-progressbar :progress="10" id="demo-inline-progressbar"></f7-progressbar></p>
<f7-segmented raised>
<f7-button @click="setInlineProgress(10)">10%</f7-button>
<f7-button @click="setInlineProgress(30)">30%</f7-button>
<f7-button @click="setInlineProgress(50)">50%</f7-button>
<f7-button @click="setInlineProgress(100)">100%</f7-button>
</f7-segmented>
</f7-block>
</f7-page>
</template>
app.js
var app = new Vue({
el: '#app',
methods: {
toHomeScreen(){
this.$f7.getCurrentView().router.back({ pageName: 'home-page', force: true});
this.$f7.closePanel();
},
setInlineProgress(value){
const self = this;
const app = self.$f7;
console.log(value);
app.progressbar.set('#demo-inline-progressbar', value);
}
},
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: [
{
path:'/',
name: 'home'
}
,
{
path: '/education/',
component: 'page-education'
},
{
path: '/ckdmbddef/',
component: 'page-mbddef'
},
],
}
});
好的,大约 6 小时后,我终于意识到要访问该函数,我需要引用它。
var app = new Vue({...blah});
我所要做的就是:在我的代码中使用 app.setInlineProgress(),而不是 setInlineProgress();
希望这对某人有用。