在 Vue 中完成渲染后如何调用方法?
How you do you call a method once rendering is done in Vue?
我正在构建一个在选项卡中包含 QuillJS 编辑器的 Vue 应用程序。我有一个简单的 setTab(tabName)
Vue 方法,它 shows/hides 选项卡与 v-if
指令。
methods: {
setTab: function (tabName) {
this.view = tabName;
if(tabName === 'compose') {
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
}
}
}
我的tab基本是这样的:
<div id="composer" v-if="tabName === 'compose'">
<!-- toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
</div>
目前,我收到一个错误,因为当我调用 new Quill(...)
时 #editor
元素尚不存在。我如何延迟页面上的 QuillJS 初始化,以便在 #editor
已经存在之前不会发生?
使用 mounted 钩子。
mounted: function () {
// Code that will run only after the
// entire view has been rendered
}
使用 this.$nextTick()
将回调推迟到下一个 DOM 更新周期后执行(例如,在更改导致 render-update 的数据 属性 之后)。
例如,您可以这样做:
methods: {
setTab: function (tabName) {
this.view = tabName;
if(tabName === 'compose') {
this.$nextTick(() => {
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
})
}
}
}
一个干净的方法是不依赖选择器,而是让 Quill 编辑器成为一个 self-contained 组件:
<template>
<div class="quill-editor">
<!-- toolbar container -->
<div ref="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- editor container -->
<div ref="editor">
<p>Hello World!</p>
</div>
</div>
</template>
<script>
...
name: "QuillEditor",
mounted() {
this.quill = new Quill(this.$refs.editor, {
modules: { toolbar: this.$refs.toolbar },
theme: 'snow'
});
}
...
</script>
我正在构建一个在选项卡中包含 QuillJS 编辑器的 Vue 应用程序。我有一个简单的 setTab(tabName)
Vue 方法,它 shows/hides 选项卡与 v-if
指令。
methods: {
setTab: function (tabName) {
this.view = tabName;
if(tabName === 'compose') {
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
}
}
}
我的tab基本是这样的:
<div id="composer" v-if="tabName === 'compose'">
<!-- toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
</div>
目前,我收到一个错误,因为当我调用 new Quill(...)
时 #editor
元素尚不存在。我如何延迟页面上的 QuillJS 初始化,以便在 #editor
已经存在之前不会发生?
使用 mounted 钩子。
mounted: function () {
// Code that will run only after the
// entire view has been rendered
}
使用 this.$nextTick()
将回调推迟到下一个 DOM 更新周期后执行(例如,在更改导致 render-update 的数据 属性 之后)。
例如,您可以这样做:
methods: {
setTab: function (tabName) {
this.view = tabName;
if(tabName === 'compose') {
this.$nextTick(() => {
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
})
}
}
}
一个干净的方法是不依赖选择器,而是让 Quill 编辑器成为一个 self-contained 组件:
<template>
<div class="quill-editor">
<!-- toolbar container -->
<div ref="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- editor container -->
<div ref="editor">
<p>Hello World!</p>
</div>
</div>
</template>
<script>
...
name: "QuillEditor",
mounted() {
this.quill = new Quill(this.$refs.editor, {
modules: { toolbar: this.$refs.toolbar },
theme: 'snow'
});
}
...
</script>