英文:
Vuejs 3.3 defineModel always returns undefined what is the problem?
问题
<template>
<input v-model="count">
</template>
<script lang="ts" setup>
const count = defineModel('count');
debugger //====当我在这里停下来时，我得到了未定义的计数
</script>
我已经将这部分添加到nuxt.config.ts，但没有成功：
vite:{
vue: {
script: {
defineModel: true,
propsDestructure: true
}
}
}
英文:
I am using Nuxt 3.5.1 and Vuejs 3.3 but defineModel macro always returns undefined I don't know why?
<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
}
}
}
答案1
得分: 1
以下是翻译好的内容：
这是我的nuxt配置，如您所说
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
vite: {
vue: {
script: {
defineModel: true,
propsDestructure: true,
},
},
},
});
还有我的组件
<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**的链接。查看代码。它在控制台中正常工作并正确打印值。
英文:
Here's my nuxt config as you said
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
vite: {
vue: {
script: {
defineModel: true,
propsDestructure: true,
},
},
},
});
And the my component
<script setup>
const count = defineModel();
console.log(count?.value);
watch(
() => count.value,
(n) => {
console.log(n);
}
);
</script>
<template>
<input v-model="count" />
</template>
Remember that as the official blog said link
>3.3 simplifies the usage with the new defineModel macro. The macro automatically registers a prop, and returns a ref that can be directly mutated:
It's working fine. I think Here's the Stackblitz link. Check out the code. It's working file and printing value properly in the console.
答案2
得分: 0
我找到了问题，这是我的 nuxt.config.ts 中的一个部分与 vite 部分冲突：
//=====当我禁用这部分时，它正常工作
hooks: {
"vite:extendConfig": (config, { isClient, isServer }) => {
if (isClient) {
config.vue = "vue/dist/vue.esm-bundler";
}
},
},
//===这是 vite 部分
vite:{
vue: {
script: {
defineModel: true,
propsDestructure: true
}
}
}
}
英文:
I figured out the problem there is section in my nuxt.config.ts that conflict with vite section:
//=====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
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论