Why does defineModel return undefinded?

[wsy998]

<script lang="ts" setup>

import {NButton, NInput, NModal, NTable} from "naive-ui";
import {defineModel, ref} from "vue";
import {FindCountry, SaveCountry} from "../../wailsjs/go/main/App";
import {model} from "../../wailsjs/go/models.ts";
import CountryItem = model.CountryItem;

const kw = ref("")
let showAddDialog = defineModel<boolean>("show", {required: true, local: true});

const countries = ref<Array<model.CountryItem>>([])

const search = () => {
  FindCountry(kw.value).then((res: model.CountryItem[]) => {
    countries.value = res
  })
}

console.log(showAddDialog)

const select = (c: model.CountryItem) => {
  SaveCountry(c).then(() => {
    console.log(showAddDialog)

    // showAddDialog.value = false
    emit("country", c)
  })
}

const emit = defineEmits<{
  (e: 'country', c: CountryItem): void
}>()


</script>

<template>
  <n-modal :on-close="()=>showAddDialog=false" :show="showAddDialog" :show-icon="false"
           block-scroll closeOnEsc preset="dialog" title="添加城市"
  >
    <template #header>
      <div>添加城市</div>
    </template>
    <div>

      <n-input v-model:value="kw" class="mb-2"></n-input>
      <n-button @click="search">搜索</n-button>
      <n-table>
        <thead>
        <tr>
          <th>Id</th>
          <th>城市名</th>
          <th>经纬度</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="country in countries" :key="country.id">
          <td>{{ country.id }}</td>
          <td>{{ country.adm1 }}-{{ country.adm2 }}-{{ country.name }}</td>
          <td>{{ country.lon }},{{ country.lat }}</td>
          <td>
            <n-button @click="select(country)">选择</n-button>
          </td>
        </tr>
        </tbody>
      </n-table>
    </div>
  </n-modal>

</template>

<style lang="sass" scoped>

</style>

I use Vite.Am I using it wrong? Can you give an example.

[wsy998]

[ubbcou]

Is it possible that undefined is passed because of the location of this component call.

You can see that in my example L5, and fixed in L8：

Example

[wsy998]

I'm starting to wonder if this syntactic sugar is implemented in vue 3.3.4, it's normal in Vue SFC Playground. Should I import this function? If I don't import it, the browser tells me that defineModel is undefined, and if I import it, defineModel returns undefined, so it's not like vite isn't handling it properly.

[liulinboyi]

Reason

Because the v-model is a syntactic sugar.
The code

<CustomComponent
  v-model:show="someValue"
/>

is equal to

<CustomComponent
  :show="someValue"
  @update:show="newValue => someValue = newValue"
/>

If you set the someValue's value is undefined, the prop show's value will be undefined.

and the code

let showAddDialog = defineModel<boolean>("show", {required: true, local: true});

will compile to

import { useModel as _useModel } from 'vue'
let showAddDialog = _useModel(__props, "show", { local: true });

_useModel will get the show from the __props.

Docs

https://cn.vuejs.org/guide/components/v-model.html

[liulinboyi]

I'm starting to wonder if this syntactic sugar is implemented in vue 3.3.4, it's normal in Vue SFC Playground. Should I import this function? If I don't import it, the browser tells me that defineModel is undefined, and if I import it, defineModel returns undefined, so it's not like vite isn't handling it properly.

Can you provide a minimum reproduction? such as a github repo @wsy998 .

[wsy998]

It's the example given by the respondent above.
https://github.com/wsy998/testvue
Of course this is my own repository.

[wsy998]

this is in firefox.
this is in chrome.

[liulinboyi]

this is in firefox. this is in chrome.

@wsy998 #8276

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        defineModel: true
      }
    })
  ]
}

[wsy998]

thank you!