标签: vuejs3

我正在使用 vue 3 和 ant design 2x。我厌倦了尝试这段代码。而且我在关注 vue 文档时，感觉有些遗漏。我被这个问题困扰了。我希望你能得出结论。

           <a-form
               :model="form"
               @submit="handleSubmit"
           >
               <a-form-item class="mb-10">
                   <a-input
                       type="text"
                       v-model="form.name"
                       placeholder="Name"
                   >   
                   </a-input>
                   <a-button type="primary" block html-type="submit">
                       SUBMIT
                   </a-button>
           <a-form>

在此先感谢您的帮助。

使用 Composition API 将数组定义为 Vue 3 组件的 props 很简单......

<script setup>

defineProps({
  items: {
    type: Array,
    required: true,
  },
});

</script>

现在这个数组应该是一个如下所示的对象数组。这也不是问题。

[
  {
    username: "foo",
    email: "foo@example.com"
  },
  {
    username: "bar",
    email: "bar@example.com"
  }
]

但是有没有办法定义数组中的每个对象都必须包含属性username和email？这样使用该组件的 props 的人就知道这些对象必须是什么样子？

当我们将 prop 传递给组件并使用 DefineProps 从子组件定义该 prop 时，会以某种方式创建属性并可从子组件模板访问该属性。

父组件.vue

<template>
    <child-component v-model="product">
</template>

<script setup>
import childComponent from "./childComponent.vue"
</script>

子组件.vue

<template>
    {{ product }}
</template>

<script setup>
const props = defineProps(['product'])
</script>

在 childComponents 模板中，product无需使用props.product或 toRef 即可访问它。我知道脚本设置会自动注入使用过的道具，但我找不到任何信息（在文档中），defineProps 也做了一些事情。有没有这方面的信息。

我正在尝试将我的 Vue3（带有 Vite 设置）项目国际化，并且@intlify/vite-plugin-vue-i18n我正在使用<script setup>

我不断得到Uncaught TypeError: i18n.global is undefined，但一切似乎都是正确的。我什至尝试过官方文档中的原始代码，您可以在这里找到

无论我做什么，Vue 或 i18n 都找不到globali18n 的属性。

所以我的 i18n.js 是这样的：

import { nextTick } from "vue";
import { createI18n } from "vue-i18n";
import axios from "axios";
import tr from "../src/locales/tr.json";
import en from "../src/locales/en.json";

export const SUPPORT_LOCALES = ["tr", "en"];

export function setupI18n(options = { locale: "tr" }) {
  const i18n = createI18n(options);
  setI18nLanguage(i18n, options.locale);
  return i18n;
}

export function setI18nLanguage(i18n, locale) {
  if …

当用户按下箭头键时，我试图调用 swiper 附带的 .slideNext() 和 .slidePrev 。

我已经成功地使用 querySelector 做到了这一点，如下所示：

const changeSlide = (event: KeyboardEvent) => {

    const slides = document.querySelector('.swiper').swiper

    if(event.key === 'ArrowLeft') {
      slides.slidePrev();
    } else if (event.key === 'ArrowRight') {
      slides.slideNext();
    }

}

然而，此方法会产生警告，并且该项目通常不允许使用 querySelector。因此，我不想使用 ref 来选择滑动器，但我还没有成功。

这是我尝试过的：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
// just some imports that are needed

const swiperRef = ref(); …

在我最近开始的项目中，我想使用vue.draggable.next。所以我在 nuxt 插件目录中创建了一个“.js”文件，并添加了如下代码。

import VueDraggableNext from "vue-draggable-next";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDraggableNext);
});

然后我在我的一个组件中使用了它，如下所示，

<template>
  <div class="h-full w-full border-2 border-dashed rounded-lg p-5 flex">
    <div class="flex w-1/6 h-full">
      <ComponentPalette />
    </div>
    <VueDraggableNext
      v-model="form.children"
      group="people"
      @start="isDragOver = true"
      @end="isDragOver = false"
      item-key="id"
      class="flex flex-col w-5/6 h-full border-blue-700 border-2 border-dashed rounded-lg p-5 space-y-5"
    >
    <template #item="{element}">
    <FormBuilder
        :component="element"
        @update="update"
      />
   </template>
      
    </VueDraggableNext>
  </div>
</template>

<script setup>
import FormBuilder from "~~/components/dynamic-components/FormBuilder.vue";
import ComponentPalette from "~~/components/form-builder/ComponentPalette.vue";
import { v4 as uuidv4 } …

我用来laravel-mix捆绑我的 Vue 3 和 Pinia 代码。我的app.js看起来像这样：

require('./bootstrap');

import { createApp } from 'vue'
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp({});

app.use(pinia);
// ...
// ...
// ...
app.mount('#app');

我的 Vue 组件中的代码是基本的，与 Pinia 文档中的代码没有什么不同https://pinia.vuejs.org/introduction.html#basic-example

然而，即使laravel-mix成功编译并捆绑了所有内容，结果页面在浏览器控制台中显示此错误：

getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

首先我的配置：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n    // if you want to use static HTML generation (SSG)\n    target: 'static',\n\n    // if you want to use server-side rendering (SSR)\n    ssr: true,\n\n    css: [\n        'assets/scss/main.css',\n        'assets/scss/header.css',\n        '@fortawesome/fontawesome-svg-core/styles.css'\n    ],\n\n    build: {\n        transpile: [\n            '@fortawesome/vue-fontawesome',\n            '@fortawesome/fontawesome-svg-core',\n            '@fortawesome/pro-solid-svg-icons',\n            '@fortawesome/pro-regular-svg-icons',\n            '@fortawesome/free-brands-svg-icons'\n        ]\n    }\n\n})\n

/plugins/fontawesome.js

import { defineNuxtPlugin } from '#app';\n\n/** Fontawesome for Nuxt 3\n * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt \n * \n*/\n\n// import the fontawesome core\nimport { library, config } from '@fortawesome/fontawesome-svg-core'\n\n// …

我在一个项目中使用 Nuxt3，当使用文档中的 cli 安装它时，它生成了一个 vue 2.7 项目。

我怎样才能使用 vue 3？

：我的 Nuxt3 应用程序遇到以下问题。当通过构建过程设置图像源时，template strings将不会渲染图像。否则，当我正常设置图像 src 时，它会出现。但我动态地需要它。有些预告片需要渲染不同的图像。

一切都工作正常，例如道具......

工作代码：

...
<img
  src="/assets/_DSC0238_E.jpg"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

不工作的代码：

...
<img
  :src="`props.image`"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

有什么方法可以解决这个问题呢？