小编kis*_*ssu的帖子

正如您从 vuetify 的官方文档中看到的，开关的标签有自己的预定义颜色。我如何覆盖它们以获得黑色文本？我将 switch 作为道具从一个名为 form structure 的全局组件传递到另一个我命名为“Primary”的组件中

https://vuetifyjs.com/en/components/selection-controls

<v-switch v-if="externalSwitch" model="switch2":label="externalSwitchLabel"> 
</v-switch>

<v-layout v-for="info in information" :key="info.title">
  <v-flex>
    <form-structure :externalSwitchLabel="`${info.title}`" 
      :externalSwitch="true" :hasSubTitle="true" :subTitle="`${info.status}`" 
      :script="`${info.script}`">
    </form-structure>
  </v-flex>
</v-layout>

我的数组如下所示：

information : [
  {title: "Something1", status:"active", script: "Hello"},
  {title: "Something2", status:"in Progress", script: "Ciao" }
]

我的 CSS 看起来像这样：

<style scoped>
.v-label.theme--light {
  color: black
}
</style>

根据这个 Nuxt 文档页面，一旦我运行yarn build，“Nuxt.js 将创建一个 .nuxt 目录，其中的所有内容都准备好部署在您的服务器托管上。”

根据其他一些 演练，还有一些其他必需的项目：、和 static/**package.jsonnuxt.config.js。

其中一篇文章以及Nuxt 页面上有关使用 IIS 部署到 Azure 的说明表示server.js需要一个文件，但我想坚持“里面的所有内容都准备好部署”。我的 Azure 应用服务也是针对 Linux 设置的，而不是针对 IIS 设置的。

然而，在我部署这些文件/文件夹npm run start（映射到nuxt start）后，会抛出一个错误，指出 nuxt 不是可识别的命令。这是有道理的，因为我还没有安装这些软件包。

我还尝试使用node .nuxt/server.js和启动 ssr 应用程序node .nuxt/dist/server/server.js。这些都不起作用。

我真的想坚持所说的“Nuxt.js 将创建一个 .nuxt 目录，其中的所有内容都准备好部署在您的服务器托管上”，而不是在部署后复制node_modules或必须复制npm install。

我在这里缺少哪些文件或命令，这可能吗？

• 节点版本为14.16
• Nuxt版本是2.15.3版本的全新安装

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "test-nuxt-app", …

import VueSocketIOExt from 'vue-socket.io-extended';
import { io } from 'socket.io-client';

const socket = io('http://localhost:3200/');
const socket1 = io('http://localhost:3100/');

Vue.use(VueSocketIOExt, socket);
Vue.use(VueSocketIOExt, socket1);

我尝试使用上面的代码。但只有套接字在工作。是否可以同时连接两个插座。

我一直在尝试在 Nuxt 中使用vue-tel-input-vuetify并且遇到了如下图所示的问题，我也尝试了此链接Github中的所有解决方案，但我得到了相同的错误。

安装后，我创建了一个插件文件plugins/vue-tel-input-vuetify.js并向其中添加了以下代码。

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)

之后，我将其添加到nuxt.config.js

plugins: [
    '~/plugins/vue-tel-input-vuetify',
    { src: '~/plugins/vue-google-charts', mode: 'client' }
  ]

在我的组件的脚本标签之间，我这样做了：

import { VueTelInputVuetify } from 'vue-tel-input-vuetify'

export default {
  components: {
    VueTelInputVuetify,
  },
...

在我的组件的模板标签之间添加了以下内容：

import Vue from 'vue'
import VueTelInputVuetify from 'vue-tel-input-vuetify'
Vue.use(VueTelInputVuetify)

我创建了一个全新的项目，npx create-nuxt-app my-cool-project但在运行时确实有一些错误yarn dev。

虽然“宽松”选项在你的@babel/preset-env 配置中被设置为“false”，但它不会被用于@babel/plugin-proposal-private-property-in-object 因为“宽松”模式选项是@babel/plugin-proposal-private-methods 设置为“true”。@babel/plugin-proposal-class-properties、@babel/plugin-proposal-private-methods 和 @babel/plugin-proposal-private-property-in-object（当它们是启用）：您可以通过将 ["@babel/plugin-proposal-private-property-in-object", { "loose": true }] 显式添加到 Babel 配置的“插件”部分来消除此警告。

你对这个有什么想法吗？它让我想起了另一个问题：Nuxt js - 全新安装的 nuxt 2.14.6 包含 babel“宽松选项”警告

我试图理解为什么更改用于提供初始值的道具不会导致数据变量发生更改。

在下面的示例中，更改initialName父组件中传递的值也会导致initialName子组件中的值发生更改。但是，name保留其最初初始化的值。我相信，更改道具会重新渲染组件，这似乎是错误的。

ChildComponent.vue

<template>
    <div>
        {{initialName}}
        {{name}}
    </div>
</template>
<script>
export default {
    props: {
        initialName: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            name: this.initialName,
        };
    },
</script>

ParentComponent.vue

<template>
    <ChildComponent :initialName="AnExampleName"/>
</template>
<script>
import ChildComponent from ChildComponent.vue
export default {
    components: {
        ChildComponent
    }
</script>

我已经能够通过观看 prop 和 update 来解决这个问题name，但这感觉不是最好的方法。

为什么改变 prop 不会改变数据？有没有更好的方法将初始值传递给子组件？

我正在尝试使用Vitest为我的应用程序编写 UT，该应用程序在 Vue 之上有 Nuxt。

definePageMeta但当我尝试模拟时，我变得不确定test.vue。

这是我的组件 test.vue-

<script setup lang="ts">
definePageMeta({
  layout: 'xyz',
  title: 'test component',
});
</script>

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

这是我的 UT 文件，命名test.spec.ts如下 -

import { describe, expect, it } from 'vitest';

import Index from '../pages/test.vue';
import { mount } from '@vue/test-utils';

describe('renders the test component', () => {
  it('renders properly', () => {
    const wrapper = mount(Index);
    expect(wrapper.text()).toContain('Hello Vitest');
  });
});

这是我收到的错误 -

我想了解一下，有什么区别

const Route = useRoute()

和

const Router = useRouter()

在 Nuxt3/Vue 中。

另外，我无法正确使用路由器。

提交时，我想使用查询字符串推送到另一个页面。

<template>
  <button @click="SearchTaxi"></button>
</template>

<script setup>
import { ref } from 'vue'
const router = useRouter()
const pickuppoint = ref('')
const dropoffpoint = ref('')

const SearchTaxi = () => {
router.push({
  path: `/airport-transfers/results?pickuppoint=${pickuppoint.value}&dropoffpoint=${dropoffpoint.value}`})
}
</script>

我预计路线会更改为

"url/airport-transfers/results?pickuppoint=XXXX&dropoffpoint=XXXX"

但我得到了

"url/airport-transfers/results"

我正在尝试了解有关组件的 vue 文档。我在文档中看到了这一段：

If you are authoring your templates directly in a DOM (e.g. as the content of a native <template> element), the 
template will be subject to the browser's native HTML parsing behavior. 
In such cases, you will need to use kebab-case and explicit closing tags for components:
----------------------------------------------------------------------------------------------------
<!-- if this template is written in the DOM -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

我不完全明白这意味着什么。在我的项目中，我可以毫无问题地使用 pascal case 或 kebab case。为什么文档这么说In such cases, you will need to use kebab-case？

它指的是什么案例？ …

我尝试使用Nuxt 3 中的 useFetch 可组合pending项status来禁用按钮并在 POST 请求挂起时显示微调器，如下所示：

const { pending, status, execute } = await useFetch("/notifyme", {
  immediate: false,
  baseURL: config.public.apiBase,
  method: "POST",
  body: {
    email: email.value,
  },
});

当如下使用时pending，即使在发出请求之前，该按钮也会被禁用，并且默认情况下会显示微调器：

<button
:disabled="pending"
type="submit">
Notify me
<ButtonSpinner v-show="pending" />
</button>

当status如下使用时，按钮不会被禁用，并且在发出请求时微调器不会显示：

<button
:disabled="status==='pending'"
type="submit">
Notify me
<ButtonSpinner v-show="status==='pending'" />
</button>

我对如何使用pending和statususeFetch 以及为什么它们如此相似而存在感到困惑。