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

超级大BUG vue3 input 组件有问题 #485

Open
tesla-cat opened this issue Dec 14, 2024 · 1 comment
Open

超级大BUG vue3 input 组件有问题 #485

tesla-cat opened this issue Dec 14, 2024 · 1 comment

Comments

@tesla-cat
Copy link

<script setup>
const val = defineModel()
</script>

<template>
  <div class="f1 col">
    <div>{{ { type: typeof val, val: val.slice(0, 10) } }}</div>
    <input
      class="input1"
      :value="String(val)"
      @input="(e) => (val = e.target.value)"
    />
  </div>
</template>
  • 有时候正常工作: valhello, 输入框也显示 hello

image

  • 有时候不能: valhello, 但输入框为空 !!!!

image

  • 版本:
"vue": "^3.5.13"
"webpack": "^5.96.1"
"mp-webpack-plugin": "^1.6.6"
@tesla-cat
Copy link
Author

tesla-cat commented Dec 14, 2024

  • 做了很多尝试 最后这么做才解决
<script setup>
import { onMounted, ref, watch } from 'vue'

defineProps(['ph'])
const val = defineModel()
const elm = ref(null)

watch(val, update)
onMounted(() => update(false))

function update(focus = true) {
  const e = elm.value
  if (focus) e.focus()
  e._oldValues = { focus: true }
  e.value = val.value || ''
}
</script>

<template>
  <input
    ref="elm"
    class="input1"
    :placeholder="ph"
    @input="(e) => (val = e.target.value)"
  />
</template>

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