vuejs / repl

Vue SFC REPL as a Vue 3 component
https://repl-vuejs.vercel.app
MIT License
930 stars 172 forks source link

How to modify the editor value, modify the files editor content in the store is not synchronized, #145

Closed ckvv closed 1 year ago

ckvv commented 1 year ago

截屏2023-08-08 12 33 18

<script setup>
import '@vue/repl/style.css';
import { Repl, ReplStore } from '@vue/repl';
import Monaco from '@vue/repl/monaco-editor';
import { ref, watch } from 'vue';

const code = ref(`<template>11</template>`)

const store = new ReplStore();
watch(code, (v) => {
  store.setFiles({'src/App.vue': v})
}, {
  immediate: true
});
</script>

<template>
  <div>
    <input type="text" v-model="code">
    <Repl :editor="Monaco" :store="store" :clear-console="false" />
  </div>
</template>

<style>
  .editor {
    min-height: 300px !important;
  }
</style>