javascript Vuejs 3.3 defineModel总是返回undefined是什么问题?

yiytaume  于 2023-05-27  发布在  Java
关注(0)|答案(2)|浏览(703)

我正在使用Nuxt 3.5.1和Vuejs 3.3,但defineModel宏总是返回undefined,我不知道为什么?

<template>
     <input v-model="count">
</template>

 <script lang="ts" setup>
   const count = defineModel('count');

   debugger //====when I stopped here I get count undefined
</script>
I added this section to nuxt.config.ts but with no success:
vite:{      
         vue: {
             script: {
                 defineModel: true,
                 propsDestructure: true                 
             }
         }
     
   }
mgdq6dx1

mgdq6dx11#

这是我的nuxt配置如你所说

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true,
      },
    },
  },
});

和my组件

<script setup>
const count = defineModel();

console.log(count?.value);

watch(
  () => count.value,
  (n) => {
    console.log(n);
  }
);
</script>

<template>
  <input v-model="count" />
</template>

记得官方博客说的链接
3.3使用新的defineModel宏简化了使用。宏自动注册一个prop,并返回一个可以直接变异的ref:
一切正常我想这是**Stackblitz**链接。检查代码。它的工作文件和打印值正确地在控制台。

vq8itlhq

vq8itlhq2#

我发现了问题,在我的nuxt.config.ts中有一节与vite节冲突:

//=====when I disable this section it works fine
 hooks: {
       "vite:extendConfig": (config, { isClient, isServer }) => {
          if (isClient) {
             config.vue =   "vue/dist/vue.esm-bundler";           
          }
       },
    },
//===this is the vite section
 vite:{      
         vue: {
             script: {
                 defineModel: true,
                 propsDestructure: true                 
             }
         }
     
   }

相关问题