小编wit*_*ein的帖子

我想v-model在组件上添加 a 但收到此警告：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

这是我的代码：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

// Parent.vue
<template>
  <h2>V-Model Parent</h2>
  <Child v-model="name" label="Name" />
  <p>{{ name }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const name = ref('')
</script>

我试图重现本教程，但我被困住了，不知道我错过了什么。

{{ …

如何清除控制台中的以下错误：

TypeError: ref.value is null

该错误仅在调整大小事件时出现。每次调整窗口大小时，都会渲染图表。于是错误信息一次又一次的出现。文档显示模板引用也用空值初始化（Source）进行初始化。所以初始化后我必须做一些事情，对吗？

这是我的代码：

<template>
  <canvas
    ref="chartRef"
  />
</template>

<script setup>
// ...
// on resize
export const chartRef = ref(null)
export function createChart () {
  const ctx = chartRef.value.getContext('2d')
  if (ctx !== null) { // fix me
    getDimensions()
    drawChart(ctx)
  }
}
// ...
</script>

如何清理我的控制台以便不再出现错误消息？谢谢。

我有一个副业项目，Vue.js 3并vite作为我的捆绑商。

每次构建之后，捆绑的文件都会从之前的构建中获得相同的哈希值，例如：

index.432c7f2f.js   <-- the hash will be identical after each new build
index.877e2b8d.css
vendor.67f46a28.js

因此，在每次新构建之后（文件上具有相同的哈希值），我必须重新加载浏览器以清除缓存并查看我所做的更改。

我尝试在 中使用不同的版本号强制清除package.json，但是：

1. 在Vite/Rollup环境下不起作用，
2. 每次更改后都手动输入新号码是没有意义的。

问题：

有没有办法配置 vite 在新构建后随机创建新哈希，或者您知道清除缓存的另一个技巧吗？

运行时，npm run build我的图片src/assets/...在 dist 目录/生产版本中不可用。所以网站上没有显示。在开发模式下它肯定可以工作。

有什么想法如何让它们在构建后可用吗？

我刚刚统一了一个useSupabase可组合项，以删除重复的代码并访问 supabase 上下文。

但是当我将可组合项导入 server/api 文件夹时出现错误：

消息“useSupabase 未定义”

// composables/useSupabase.js
import { createClient } from '@supabase/supabase-js'
const useSupabase = () => {
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
  return {
    supabase
  }
}
export default useSupabase

// server/api/login.js
export default async (event) => {
  const body = await useBody(event)
  const { supabase } = useSupabase()

  const { user } = await supabase.auth.signUp({
    email: body.email,
    password: body.password
  })
  return user
}

有没有办法将可组合项导入端点？

另一次尝试

// server/api/logout.js
import { supabase } from …

我有一个事件侦听器，可以在安装项目时以及每次调整大小事件之后获取视口尺寸。

我不知道如何正确删除事件侦听器。

const { createApp, onMounted, ref } = Vue;
const app = createApp({
  setup() {
    const dim = ref({})
    
    onMounted(() => {
      dim.value = getDimensions()
      // adding the event listener...
      window.addEventListener('resize', debounce(() => {
        // ...but how to remove the event listener correctly?
        console.log('resize')
        dim.value = getDimensions()
      }, 250))
    })
    
    function getDimensions () {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      }
    }
    
    // generic debounce function
    function debounce (func, wait) {
    let timeout
    return function executedFunction (...args) {
      const …

我不知道如何将参数传递给 Nuxt 3 中的匿名函数。

index.vue:

<template>
  <form @submit.prevent="signUpNewsletter()">
    <input type="email" placeholder="example@x.com" v-model="userEmail">
    <input type="submit" value="Submit">
  </form>
</template>

<script setup>
const userEmail = ref('x@x.de')

function signUpNewsletter () {
  useAsyncData(
    'newsletter',
    () => $fetch('/api/sign_up_news', {
      method: 'POST', // Post method works
      body: {
        email: userEmail.value
      }
    })
  )
}
</script>

server/api/sign_up_news.js:

import { createClient } from '@supabase/supabase-js'

export default async (email) => { // can't read the parameter
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const …

我想知道如何使用组合 API 观察 Vue 3 中父组件的子属性（我正在使用实验脚本设置）。

<template>//Child.vue
  <button 
    @click="count++" 
    v-text="'count: ' + count" 
  />
</template>

<script setup>
import { ref } from 'vue'

let count = ref(1)
</script>

<template>//Parent.vue
  <p>parent: {{ count }}</p> //update me with a watcher
  <Child ref="childComponent" />
</template>


<script setup>
import Child from './Child.vue'
import { onMounted, ref, watch } from 'vue'

const childComponent = ref(null)
let count = ref(0)

onMounted(() => {
  watch(childComponent.count.value, (newVal, oldVal) => {
    console.log(newVal, oldVal);
    count.value = newVal
  }) …

我正在使用实验脚本设置来创建学习环境。我有一个自制的导航栏，打开一个组件。

我在使用该<component :is="" />方法时遇到问题。此方法在组件基础 -> 动态组件下的文档中进行了描述

在 Vue 3 Composition API 中，它按预期工作：

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="tab" />
</template>

<script>
import { ref } from 'vue'
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'

export default {
  components: {
    NavigationBar,
    TemplateSyntax,
    DataPropsAndMethods
  },
  setup () {
    const tab = ref('DataPropsAndMethods')
    function changeTab (newTab) {
      tab.value = newTab
    }

    return {
      changeTab,
      tab
    }
  }
}
</script>

我的script …

我想从父级获取 vue.js 组件的尺寸（我正在使用实验性脚本设置）。

当我在组件内使用 ref 时，它按预期工作。我得到尺寸：

// Child.vue
<template>
  <div ref="wrapper">
   // content ...
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const wrapper = ref(null)

onMounted(() => {
  const rect = wrapper.value.getBoundingClientRect()
  console.log(rect) // works fine!
})
</script>

但我想获取父组件内的维度。这可能吗？

我试过这个：

// Parent.vue
<template>
  <Child ref="wrapper" />
</template>
<script setup>
import Child from './Child'
import { ref, onMounted } from 'vue'

const wrapper = ref(null)

onMounted(() => {
  const rect = wrapper.value.getBoundingClientRect()
  console.log(rect) // failed! …

我想在一个 vue 组件中导入多个 svg。文档说我必须导入它们中的每一个，但是如何以更短更清晰的方式导入多个 svg？

vue-svg-loader 文档：https : //vue-svg-loader.js.org/

<script>
import Info from "@/assets/svgs/info.svg";
import Help from "@/assets/svgs/help.svg";
import Close from "@/assets/svgs/close.svg";
// etc. pp.

export default {
  components: {
    Info,
    Help,
    Close
  }
</script>

如果我想导入超过一百个 svg 会发生什么？

有什么想法可以解决这个问题吗？