InputText v-model not binding correctly

[jak888]

Hi all,

I'm having a little problem with the InputText element:

Code: Select all

<InputText type="text" v-model="someString"/>
<p>{{ someString }}</p>

and

Code: Select all

export default {
  data() {
    return {
      someString: ''
    }
  }
}

The paragraph stays empty. I know that my property is correct because I can bind it to a standard input without problems.

I'm getting the following warning with it: [Vue warn]: Property "$listeners" was accessed during render but is not defined on instance.
at <InputText type="text" content="" onUpdate:content=fn >
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>

Additionally, when looking at it in the Vue devtools, the modelValue is in the attributes. In comparison, for the demo app, it is in the props. There the binding also works.

Any help is greatly appreciated. I also posted this question on the discord, I hope this is OK.
Thanks in advance

[jak888]

I have now created a brand new Vue project and am seeing the same behavior. All I did was create the new project, install primevue and add the input text to the HelloWorld.vue:

Code: Select all

<template>
  <div class="hello">
    <InputText type="text" v-model="textProp" />
    <input type="text" v-model="textProp" >
    <p>{{ textProp }}</p>
    <h1>{{ msg }}</h1>
   ...
   <script>
import InputText from 'primevue/inputtext'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      textProp: ''
    }
  },
  components: {
    InputText
  }
}
</script>

Again, the <input> works as expected, but the InputText does not. What am I doing wrong?

[tugce.kucukoglu]

Interesting. Which version are you using?

https://codesandbox.io/s/h5vvl?file=/sr ... xtDemo.vue

[jak888]

Interesting. Which version are you using?

https://codesandbox.io/s/h5vvl?file=/sr ... xtDemo.vue

Thanks for making me feel as stupid as I hoped I would...

I had v2.4.1 installed. I updated to 3.4.0 and of course, that works. Thank you!

One last question about that: to install primevue I ran

Code: Select all

npm install --save primevue

Shouldn't this automatically install the latest version? I also tried

Code: Select all

@latest

, but that didn't work, I had to specify that I wanted 3.4.0. Also https://www.npmjs.com/package/primevue states that 2.4.1 is the latest version. I understand that's because it technically is, because 2.4.1 is newer than 3.4.0. Still some unexpected behaviors as a result.

[tugce.kucukoglu]

Unfortunately there are some disadvantages of running two projects at the same time. And thanks for your understanding.

[jak888]

Yeah, I understand that this is npm's problem for using the date as a criterion for @latest, as opposed to the version number. Thanks again for the help!