如何在 Vue3 设置功能中使用 slugify？ [关闭]

Question

我已经习惯在Vue2中使用slugify，但是在Vue3中使用Setup功能时无法让它工作。

我有一个包含播放列表的数据库，当我创建一个新的播放列表时，我想根据播放列表标题创建一个 slug。 但我收到一条错误消息，提示我“无法设置 null 的属性‘值’”，它指向 slug 值。

这样做的正确方法是什么？

 setup() {

       const { filePath, url, uploadImage } = useStorage()
       const { error, addDoc } = useCollection('playlists')

       const title = ref('')
       const description = ref('')
       const file = ref(null)
       const fileError = ref(null)
       const isPending = ref(false)
       const slug = (null)

       const handleSubmit = async () => {
          if (file.value) {
             isPending.value = true
             await uploadImage(file.value)
             await addDoc({
                title: title.value,
                description: description.value,
                slug: slug.value,
                coverUrl: url.value,
                filePath: filePath.value,
                songs: [],
                createdAt: timestamp()
             })
             isPending.value = false
             if(!error.value) {
                console.log('Playlist added')
             }
          }

          if (title.value) {
             slug.value = slugify(title.value, {
                replacement: '-',
                remove: /[*+~.()'"!:@]/g,
                lower: true
             })
          }
       }

       // allowed file types

       const types = ['image/png', 'image/jpeg']

       const handleChange = (e) => {
          const selected = e.target.files[0]
          console.log(selected)

          if (selected && types.includes(selected.type)) {
             file.value = selected
             fileError.value = null 
          } else {
             file.value = null
             fileError.value = 'Please select an image of the type JPG or PNG'
          }
       }

       return {
          title,
          description,
          handleSubmit,
          handleChange,
          fileError,
          file,
          isPending,
          slug
       }
    }

Answer 1

你的错误不是因为错字吗？

const slug = (null) // => const slug = ref(null) ?