Some components (float label, validate) not working correctly in Typescript

[damnh]

Hi,

I'm using Vue 3 with typescript and primevue to create my front end app.
When I used float label for my inputtext, I have some problems.
When we focused the inputtext, label is floated and moved to top of inputtext. But when I input some text and lost focus, the label come back again.
I considered inputtext is not added class "p-filled" to component.
As the same when I want to validate required for this inputtext.
If I build Vue 3 without support typescript, everything is ok.
Could you please show me my fault, thank you so much!

My App.vue file

Code: Select all

<template>
  <div class="p-fluid" style="margin-top: 50px;">
    <div class="p-grid">
      <div class="p-field p-col-12">
        <span class="p-float-label">
          <InputText id="textTest" type="text" v-model.trim="textTest" required="true" :class="{'p-invalid': submitted && !username}" />
          <label for="textTest">Test Label</label>
          <small v-if="submitted && !username">Please input this field</small>
        </span>
      </div>
      <div class="p-col-12">
        <Button label="Execute" style="width: 100%" @click="doRun" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'

@Options({
  props: {
    textTest: String,
    submitted: Boolean
  }
})

export default class OkApp extends Vue {
  textTest!: string
  submitted!: boolean

  doRun () {
    this.submitted = true
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

My main.ts file

Code: Select all

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import PrimeVue from 'primevue/config'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'

import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'

const app = createApp(App)

app.use(store)
app.use(router)

app.use(PrimeVue)
app.component('InputText', InputText)
app.component('Button', Button)

app.mount('#app')

[Eugene82]

Looks like name in v-model.trim="textTest" should have other syntax because it comes from a parent component as a prop. Maybe InputText works with v-model = names as props in a bit different way. Have the same problem.