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

[comp:all] 所有支持 v-model 的 props, 都支持受控和非受控模式。 #510

Closed
1 task done
danranVm opened this issue Nov 12, 2021 · 1 comment
Closed
1 task done
Assignees
Labels

Comments

@danranVm
Copy link
Member

danranVm commented Nov 12, 2021

  • I have searched the issues of this repository and believe that this is not a duplicate.

  • 如果使用 v-model, 那么就是非受控的, 例如:

<template>
  <IxInput v-model:value="valueRef" />>
</template>

<script setup lang="ts">
import { ref} from 'vue'

const valueRef = ref('')
</script>
  • 如果不传入 props, 那么也是非受控的, 例如:
<template>
  <IxInput />
</template>
  • 如果直接绑定 props, 那么就是受控的,例如:
<template>
  <IxInput :value="valueRef" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const valueRef = ref('')

const onChange = (value: string) => {
  valueRef.value = value
}
</script>
@idux-bot
Copy link

idux-bot bot commented Nov 12, 2021

Translation of this issue:

[COMP: ALL] All support for V-Model supports controlled and non-controlled modes.

  • [] I have search the [Issues] (https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

  • If you use V-MODEL directly, it is non-controlled, for example:

<template>
  <IxInput v-model:value="valueRef" />>
</template>

<script setup lang="ts">
import { ref} from 'vue'

const valueRef = ref('')
</script>
  • If you don't get in PROPS, it is not controlled, for example:
<template>
  <IxInput />
</template>
  • If you directly bind PROPS, it is controlled, for example:
<template>
  <IxInput :value="valueRef" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const valueRef = ref('')

const onChange = (value: string) => {
  valueRef.value = value
}
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant