Nuxt 3中Vue Toastify无法更新Toast问题求助

首要语法错误 #

你代码里的字符串 'I'm Loading!...' 存在单引号嵌套冲突，JavaScript中用单引号包裹的字符串内部不能直接使用未转义的单引号，这会直接导致语法错误，代码无法正常执行，自然也不会触发后续的Toast更新逻辑。

你可以通过两种方式修复：

• 对内部单引号转义：'I\'m Loading!...'
• 改用双引号包裹字符串："I'm Loading!"

其他优化与验证点 #

1. 确保你已在Nuxt3中正确注册vue-toastify插件，比如在plugins/vue-toastify.ts中完成插件注册：

import { createToast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('toast', createToast({
    // 全局配置项
  }));
});

2. 确认update方法使用的toastId与loading返回的ID完全一致（你已通过console.log打印，可在修复语法错误后再次验证）
3. 更新Toast时，纯文本内容可以用text字段替代render，两者效果一致，写法更直观

修正后的示例代码 #

const toastId = useNuxtApp().$toast.loading("I'm Loading!...", { timeout: -1 });
console.log(toastId);
useNuxtApp().$toast.update(toastId, {
  text: 'Not loading anymore',
  autoClose: true,
  closeOnClick: true,
  closeButton: true,
  type: 'success',
  isLoading: false,
});

内容的提问来源于stack exchange，提问作者JMKelley