vue3 composition api 为自定义输入框添加或删除类

Question

<script lang="ts" setup>
import { ref, computed } from 'vue'
const { modelValue = '' } = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])

const isFilled = ref(false)

const value = computed({
  get() {
    return modelValue
  },
  set(value: string) {
    isFilled.value = value.length > 0
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" :class="{ 'filled': isFilled }" v-bind="$attrs" />
</template>

sfc playground

第一次按键不生效。例如：按abcdefg，最后输入框显示bcdefg，用退格键删掉再试，还是一样。

我注释掉了 isFilled.value = value.length > 0 并且它工作正常，但是除此之外，我如何向元素添加 class？

我需要的效果是在输入框的值不为空的时候给它加一个class名字为filled

Answer 1

我会为这个任务使用观察者，示例代码：

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

const { modelValue = '' } = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])
const isFilled = ref(false)
const inputText = ref("")

watch(inputText,(newValue, oldValue)=>{
  isFilled.value = inputText.value.length > 0
  emit('update:modelValue', inputText.value)
})
</script>

<template>
  <input v-model="inputText" :class="{ 'filled': isFilled }" v-bind="$attrs" />
</template>

如果您只想添加 class，您也可以直接添加。示例：

<script lang="ts" setup>
import { ref, watch } from 'vue'
const inputText = ref("")
</script>
<template>
  <input v-model="inputText" :class="{ 'filled': (inputText.length>0) }" v-bind="$attrs" />
</template>

vue3 composition api 为自定义输入框添加或删除类

vue3 composition api adds or removes classes for custom input boxes

javascript

vuejs3

vue-composition-api

vue3 composition api 为自定义输入框添加或删除 类

vue3 composition api adds or removes classes for custom input boxes

javascript

vuejs3

vue-composition-api

vue3 composition api 为自定义输入框添加或删除类