【发布时间】:2021-06-08 05:43:05
【问题描述】:
好的,所以我正在 vuejs 中使用 tinymce 开发所见即所得的编辑器。在我将 v-model 放在 tinymce html 标记上之前,一切工作正常。 v-model 的值是从 loadData 方法(来自 api)获取的,所以当从 api 加载数据时它会更新值。它总是显示错误“无法读取 null 的属性 'getContent'”,但是,即使它总是出错,有时 loadData 方法的值会在 tinyMCE 编辑器中加载,但有时不会加载。那么,这里发生了什么?我的代码有问题吗?
(下面是html代码)
<div v-show="sideMenuIndex == 11">
<h1>Descriptions (Bio)</h1>
<div class="columns">
<div class="column col-10">
<tinymce :toolbar1="'undo redo | bold italic'" v-model="form.bio"></tinymce>
</div>
</div>
(下面是vue.js的初始代码)
var app = new Vue({
el: '#form-place',
data: {
sideMenuIndex: 0,
search: '',
bio: 'Ini adalah testing',
form: {
_id: null,
name: '',
slug: '',
city: 'bandung',
address: '',
categories: [],
menu_categories: [],
parkir: '',
bio: '',
is_draft: true,
is_partner: false,
is_halal: true,
is_sticker: false,
photo: null,
cuisines: [],
payments: [],
facilities: [],
covid: [],
galleries: [],
operational_times: [
{day: 'Senin', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
{day: 'Selasa', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
{day: 'Rabu', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
{day: 'Kamis', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
{day: 'Jumat', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
{day: 'Sabtu', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
{day: 'Minggu', openTime: '00:00', closeTime: '00:00', is_open: true, is_24Hours: false},
],
call_to_actions: [
{type: "gmaps", value: '', draft: false},
{type: "whatsapp", value: '', draft: false},
{type: "instagram", value: '', draft: false},
{type: "web", value: '', draft: false},
{type: "grabfood", value: '', draft: false},
{type: "gofood", value: '', draft: false},
{type: "checkin", value: '', draft: false},
{type: "linkmenu", value: '', draft: false},
],
payment_detail: []
},
(下面是loadData方法代码)
loadPlace: async function () {
if (!placeId) return;
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('nav'))
this.sideMenuIndex = urlParams.get('nav')
try {
const res = await fetch(`/api/v1/places/${placeId}`);
const data = await res.json();
this.form = data.data;
this.options.data = 'https://emam.id/qr/' + this.form.slug;
this.form.categories = this.form.categories.map(e => ({id: e.id, text: e.name}));
this.form.payments = this.form.payments.map(e => ({code: e.code, text: e.name}));
if (this.form.parkir)
this.form.parkir = this.form.parkir.id;
this.formFieldValues.payments = this.form.payments;
this.loadGalleriesFromData();
this.loadPhotoFromData();
} catch (error) {
console.log(error);
}
},
(未加载 v-model 值时的图片) Picture1
加载 v-model 值时的图片 Picture2
【问题讨论】: