xxx is not a valid value for v-model. Expected: v-model

[anyesu]

First of all, I'm sorry. This bug should belong to the intellij-community project, but I don't know how to test it in that project. I see that the author of the relevant code is also you, so I came here.

ref: https://youtrack.jetbrains.com/issue/WEB-52219

Environment

OS	IntelliJ IDEA 2023.3.2
Windows 10 10.0.19045	#IU-233.13135.103

Steps to reproduce

1. Create an empty project and install dependencies.

   npm i vue @nutui/nutui

2. Create a Vue file.

   <template>
     <nut-pull-refresh v-model="refresh" />
   </template>
   <script setup lang="ts">
   import { ref } from 'vue';
   
   const refresh = ref(false);
   </script>

3. Then you can see a warning appearing on the refresh .

   refresh is not a valid value for v-model. Expected: v-model

   

Temporary workaround

Below is the definition of nut-pull-refresh in the web-types.json file:

https://cdn.jsdelivr.net/npm/@nutui/nutui@4.3.2/dist/smartips/web-types.json

{
  "name": "nut-pull-refresh",
  "slots": [],
  "events": [],
  "attributes": [
    {
      "name": "v-model",
      "default": "`false`",
      "description": "是否触发下拉刷新",
      "value": {
        "type": "boolean",
        "kind": "expression"
      }
    }
  ]
}

A key point here is that the value of type is boolean .

If you modify the type as follows, the warning disappears:

- "type": "boolean"
+ "type": "boolean "

But this approach is obviously unrealistic, because the web-types.json is generated by a third-party library and is syntactically correct.

Debugging and analysis

First, the warning is generated by the following code:

https://github.com/JetBrains/intellij-community/blob/1d4c2a0bf89a28abb2a469bdb5fee511ef05f52c/xml/xml-psi-impl/src/com/intellij/html/webSymbols/attributes/WebSymbolAttributeDescriptor.kt#L56-L60

The enumValues is a non-null value and is assigned in the following code:

https://github.com/JetBrains/intellij-community/blob/1d4c2a0bf89a28abb2a469bdb5fee511ef05f52c/xml/xml-psi-impl/src/com/intellij/html/webSymbols/attributes/impl/WebSymbolHtmlAttributeInfoImpl.kt#L67-L70

Since the value of attrValue?.kind is null , the kind is assigned the default value Kind.PLAIN , causing isHtmlBoolean to become ThreeState.YES .

After debugging I found the following code:

https://github.com/JetBrains/intellij-community/blob/1d4c2a0bf89a28abb2a469bdb5fee511ef05f52c/platform/webSymbols/src/com/intellij/webSymbols/webTypes/impl/WebTypesJsonContributionAdapter.kt#L250-L260

When copying attributeValue to HtmlAttributeValue() here, the kind field is missing.

So I guess the problem is caused here. If you modify it like the following, it may be able to fix the problem:

 attributeValue?.let { other ->
    it.required = other.required
    it.default = other.default
    it.type = other.type
+   it.kind = other.kind
 }

As said before I don't know how to test it in the intellij-community , so I changed the value during the breakpoint to test the effect.

The test result is that after modification, there will be no more warnings.

Modify the web-types.json file to make it reload.

[anyesu]

@piotrtomiak Please take a look, thank you

[piotrtomiak]

@anyesu - thanks for taking time to analyze the issue. The problem is that WebStorm at the moment does not have support for validating types with v-model. The modelValue property, in Web Types, should not be declared as v-model, but as modelValue. There should also be event update:modelValue, and as far as I can see two more events change and refresh. In this case you don't get any errors, and binding to modelValue is presented when required. Unfortunately, with this setup type validation doesn't work either.

[anyesu]

@piotrtomiak Thank you for your reply.

in Web Types, should not be declared as v-model, but as modelValue.

I tried this and it does fix the warning.

 {
-  "name": "v-model",
+  "name": "modelValue",
   "default": "`false`",
   "description": "是否触发下拉刷新",
   "value": {
     "type": "boolean",
     "kind": "expression"
   }
 }

But the hint of v-model will be the description in Vue :

web-types/packages/vue/vue@3.0.0.web-types.json

Lines 606 to 614 in 2c07137

	{
	"name": "v-model",
	"description": "Create a two-way binding on a form input element or a component. For detailed usage and other notes, see the Guide section.",
	"doc-url": "https://v3.vuejs.org/api/directives.html#v-model",
	"value": {
	"kind": "expression",
	"required": true,
	"type": "any"
	},

If I apply the workaround I mentioned above, hint for v-model will be the description in the library, which I think should be more user friendly.

- "type": "boolean"
+ "type": "boolean "

[anyesu]

In addition, can you help confirm whether it.kind = other.kind is missing? If this could be fixed, I think it should be a better solution.

https://github.com/JetBrains/intellij-community/blob/1d4c2a0bf89a28abb2a469bdb5fee511ef05f52c/platform/webSymbols/src/com/intellij/webSymbols/webTypes/impl/WebTypesJsonContributionAdapter.kt#L253-L255

 attributeValue?.let { other ->
    it.required = other.required
    it.default = other.default
    it.type = other.type
+   it.kind = other.kind
 }

[piotrtomiak]

@anyesu - I've made this on purpose, this is a conversion from an older Web Types format (1.x, which was only for Vue). In new format, you would specify a Vue component under vue-components instead of elements kind and you would specify props under props and some additional attributes under attributes.

Regarding the documentation on v-model - what does it say on the screenshot ? I don't know Chinese.

[anyesu]

In new format, you would specify a Vue component under vue-components instead of elements kind and you would specify props under props and some additional attributes under attributes.

Is there a link to the relevant documentation? I don't know much about this. Or do you know of a Vue library that has a complete web-types.json example using the correct syntax?

As far as I can see, in the web-types.json files of some libraries, there is no vue-components or elements , and their components are under $root/contributions/html/tags , which is same as vue@3.0.0.web-types.json :

web-types/packages/vue/vue@3.0.0.web-types.json

Lines 1 to 15 in 2c07137

	{
	"$schema": "../../schema/web-types.json",
	"framework": "vue",
	"name": "vue",
	"version": "3.0.0",
	"contributions": {
	"html": {
	"types-syntax": "typescript",
	"description-markup": "markdown",
	"tags": [
	{
	"name": "Component",
	"doc-url": "https://v3.vuejs.org/api/built-in-components.html#component",
	"description": "A “meta component” for rendering dynamic components. The actual component to render is determined by the `is` prop.",
	"attributes": [

Regarding the documentation on v-model - what does it say on the screenshot ? I don't know Chinese.

Sorry, this is my problem. Let me explain:

In the screenshot above, the documentation 是否触发下拉刷新 is the description of the modelValue property, this can be anything. But in the web-types.json of third-party library, the property name is written as v-model .

{
  "name": "nut-pull-refresh",
  "slots": [],
  "events": [],
  "attributes": [
    {
      "name": "v-model",
      "default": "`false`",
      "description": "是否触发下拉刷新", // This line will appear in the "v-model" hint
      "value": {
        "type": "boolean",
        "kind": "expression"
      }
    }
  ]
}

In youzan/vant#12787 , I've fixed https://youtrack.jetbrains.com/issue/WEB-52219 using the workaround below:

• Define the v-model and modelValue properties with the same value:

  Supports both v-model="value" and :model-value="value" syntax.

  {
    "name": "van-pull-refresh",
    "attributes": [
      {
        "name": "modelValue",
        "default": "-",
        "description": "Loading status",
        "value": {
          "type": "boolean",
          "kind": "expression"
        }
      },
      {
        "name": "v-model",
        "default": "-",
        "description": "Loading status",
        "value": {
          "type": "boolean ",
          "kind": "expression"
        }
      }
    ],
    "events": [
      {
        "name": "update:modelValue",
        "description": "Loading status\n\nEmitted when the value of `modelValue` prop changes.",
        "arguments": [
          {
            "name": "modelValue",
            "type": "boolean"
          }
        ]
      }
    ],
    "slots": []
  }

• Add update:modelValue event.

• Change the type of v-model to "boolean " instead of "boolean" .

  The purpose of adding the trailing space is to make the type recognized as a COMPLEX type instead of a BOOLEAN type , because "kind": "expression" does not take effect. This way looks a little strange, but it is indeed effective. Compared with the way changing the case (for example, changing it to Boolean ), it is more compatible with old IDEs ( E.g. 2021.2.3 ).

Before

After

I have only verified locally that the fix works for these versions of the IDE ( IntelliJ IDEA 2021.2.3 to IntelliJ IDEA 2023.3.2 ). Due to some compatibility issues, I still need to use IntelliJ IDEA 2021.2.3 in some projects.