Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bidirectional binding not effective <CodeEdit v-model:code="code" /> #221

Open
4 tasks done
xjie0626 opened this issue Apr 11, 2024 · 0 comments
Open
4 tasks done

Comments

@xjie0626
Copy link

Describe the bug

When I write the binding in the parent component, using concise mode is not effective(). It is not a problem to write it in this way in other components. Is there a problem with where I wrote it? Please help me take a look, thank you!

this is my parent component

<template>
  <div>
    <el-button @click="console.log(code)">check1</el-button>
    <CodeEdit v-model:code="code" />
    // there is no problem using the following method
    <!-- <CodeEdit
      :code="code"
      @update:value="
        newVal => {
          code = newVal
        }
      "
    /> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import CodeEdit from "./CodeEdit.vue"
const code = ref("")
</script>

this is my subcomponents

<template>
  <div>
    <el-button @click="check2">queding</el-button>
    <codemirror
      v-model="valueCode"
      class="code-content"
      @ready="handleReady"
      :style="{ height }"
      placeholder="Please enter the code."
      :extensions="extensions"
      :autofocus="config.autofocus"
      :disabled="config.disabled"
      :indent-with-tab="config.indentWithTab"
      :tab-size="config.tabSize"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue"
import { Codemirror } from "vue-codemirror"
import { StreamLanguage } from "@codemirror/language"
import { javascript } from "@codemirror/lang-javascript"
import { shell } from "@codemirror/legacy-modes/mode/shell"
const view = ref<any>()
const handleReady = (payload: { view: any }) => {
  view.value = payload.view
}
interface CodeEditorProps {
  code: string
  placeholder?: string
  autofocus?: boolean
  disabled?: boolean
  language?: string
  height?: string
  tabSize?: number
  theme?: string
}
const props = withDefaults(defineProps<CodeEditorProps>(), {
  placeholder: "please input...",
  disabled: false,
  indentWithTab: true,
  tabSize: 4,
  autofocus: true,
  height: "500px",
  language: "javascript",
  theme: ""
})
const config = reactive<any>({
  placeholder: props.placeholder,
  disabled: props.disabled,
  tabSize: props.tabSize,
  autofocus: props.autofocus,
  height: props.height,
  indentWithTab: true
})
const extensions = computed(() => {
  const result = []
  if (props.language) {
    result.push(props.language === "javascript" ? javascript() : StreamLanguage.define(shell))
  }
  if (props.theme) {
    result.push([])
  }
  return result
})
const emits = defineEmits<{
  "update:value": [value: string]
}>()
const valueCode = computed({
  get() {
    return props.code
  },
  set(val: string) {
    console.log(val)
    emits("update:value", val)
  }
})
const check2 = () => {
  console.log(valueCode.value)
  console.log(props)
}
</script>
<style lang="scss" scoped>
.code-content {
  :deep(.cm-editor) {
    height: 200px;
    background-color: #fbfbfb;
    border: 1px solid #e5e6eb;
    &.cm-focused {
      outline: none;
    }
  }
}
</style>

Reproduction

.

System Info

win11,Google Chrome,"vue-codemirror": "^6.1.1"

Used Package Manager

pnpm

Validations

  • Read the the documentation in detail.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
  • The provided reproduction is a minimal reproducible example of the bug.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant