# Vue+Vite+Larvel+Inertia 模板測試方法 2022-12-14
###### tags: `Vue` `JS` `TS` `tinymce` `前端心得` `重構`
---

在 引入 tinymce, ref, watch, nextTick 組件的情況下

可以直接在 template 中測試資料的方式, 來測試組件功能

例如直接在模板中使用資料 ↓

<template>
  <!-- 例如 renewTextArea ↓ 直接設置資料 -->
  {{ renewTextArea }}
  <div class="tinymce-box textarea" v-if="renewTextArea">
    <editor v-model="textContent" :init="init" :disabled="disabled" />
  </div>
  <!-- 例如 init ↓ 直接設置資料 -->
  {{ init }}
  <el-button @click="aaa">aaa</el-button>
</template>

const renewTextArea = ref(true);
const init = reactive({
  // width: '100%',
  min_height: 240,
  height: 500,
  // 自動聚焦
  ...
  一大坨相關設定~
  ...
  
// element 中英語系配置
if (globalStore.language = 'cn') {
  init.language = 'cn';
  console.log(init.language);
} 

這樣會印出來 ↓
`{{ renewTextArea }}` 的部分 ↓
`{{ init }}` 的部分 ↓

----