---
# System prepended metadata

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

---

# 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 }}` 的部分 ↓   
![](https://i.imgur.com/2PHOIYI.png)   
`{{ init }}` 的部分 ↓   
![](https://i.imgur.com/U179WBN.png)   


----