Vuejs 3.3 defineModel 总是返回 undefined，问题是什么？

huangapple
go评论152阅读模式
英文:

Vuejs 3.3 defineModel always returns undefined what is the problem?

问题

  1. <template>
  2.      <input v-model="count">
  3. </template>
  5. <script lang="ts" setup>
  6.    const count = defineModel('count');
  8.    debugger //====当我在这里停下来时，我得到了未定义的计数
  9. </script>
  10. 我已经将这部分添加到nuxt.config.ts，但没有成功：
  11. vite:{      
  12.          vue: {
  13.              script: {
  14.                  defineModel: true,
  15.                  propsDestructure: true                 
  16.              }
  17.          }
  18.      
  19.    }
英文:

I am using Nuxt 3.5.1 and Vuejs 3.3 but defineModel macro always returns undefined I don't know why?

  1.  <template>
  2.      <input v-model="count">
  3. </template>
  5.  <script lang="ts" setup>
  6.    const count = defineModel('count');
  8.    debugger //====when I stopped here I get count undefined
  9. </script>
  10. I added this section to nuxt.config.ts but with no success:
  11. vite:{      
  12.          vue: {
  13.              script: {
  14.                  defineModel: true,
  15.                  propsDestructure: true                 
  16.              }
  17.          }
  18.      
  19.    }

答案1

得分: 1

以下是翻译好的内容：

这是我的nuxt配置，如您所说

  1. // https://nuxt.com/docs/api/configuration/nuxt-config
  2. export default defineNuxtConfig({
  3.   vite: {
  4.     vue: {
  5.       script: {
  6.         defineModel: true,
  7.         propsDestructure: true,
  8.       },
  9.     },
  10.   },
  11. });

还有我的组件

  1. <script setup>
  2. const count = defineModel();
  4. console.log(count?.value);
  6. watch(
  7.   () => count.value,
  8.   (n) => {
  9.     console.log(n);
  10.   }
  11. );
  12. </script>
  14. <template>
  15.   <input v-model="count" />
  16. </template>

请记住，正如官方博客所说的那样链接

3.3版本通过新的defineModel宏简化了使用。该宏自动注册一个prop，并返回一个可以直接进行更改的ref：

它运行正常。我认为这是**Stackblitz**的链接。查看代码。它在控制台中正常工作并正确打印值。

英文:

Here's my nuxt config as you said

  1. // https://nuxt.com/docs/api/configuration/nuxt-config
  2. export default defineNuxtConfig({
  3.   vite: {
  4.     vue: {
  5.       script: {
  6.         defineModel: true,
  7.         propsDestructure: true,
  8.       },
  9.     },
  10.   },
  11. });

And the my component

  1. &lt;script setup&gt;
  2. const count = defineModel();
  4. console.log(count?.value);
  6. watch(
  7.   () =&gt; count.value,
  8.   (n) =&gt; {
  9.     console.log(n);
  10.   }
  11. );
  12. &lt;/script&gt;
  14. &lt;template&gt;
  15.   &lt;input v-model=&quot;count&quot; /&gt;
  16. &lt;/template&gt;

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 部分冲突：

  1. //=====当我禁用这部分时，它正常工作
  2.  hooks: {
  3.        "vite:extendConfig": (config, { isClient, isServer }) => {
  4.           if (isClient) {
  5.              config.vue =   "vue/dist/vue.esm-bundler";           
  6.           }
  7.        },
  8.     },
  9. //===这是 vite 部分
  10.  vite:{      
  11.          vue: {
  12.              script: {
  13.                  defineModel: true,
  14.                  propsDestructure: true                 
  15.              }
  16.          }
  17.      
  18.    }
  19. }
英文:

I figured out the problem there is section in my nuxt.config.ts that conflict with vite section:

  1. //=====when I disable this section it works fine
  2.  hooks: {
  3.        &quot;vite:extendConfig&quot;: (config, { isClient, isServer }) =&gt; {
  4.           if (isClient) {
  5.              config.vue =   &quot;vue/dist/vue.esm-bundler&quot;;           
  6.           }
  7.        },
  8.     },
  9. //===this is the vite section
  10.  vite:{      
  11.          vue: {
  12.              script: {
  13.                  defineModel: true,
  14.                  propsDestructure: true                 
  15.              }
  16.          }
  17.      
  18.    }

huangapple
  • 本文由 发表于 2023年5月26日 09:14:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76337077.html
  • html
  • javascript
  • nuxt.js
  • typescript
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定