小编kis*_*ssu的帖子

我试图v-alert根据payment-successful查询参数是true还是有条件地显示false.

这是我尝试过的：

<v-alert v-if="$route.query.payment-successful == true" type="success" dismissible>
  I'm an alert
</v-alert>

但它似乎不起作用，因为当我设置查询参数时没有显示警报。我也尝试将$route.query.payment-successful引号放在引号之间，但它也不起作用。

我的 js 文件中有一个数组，其中列出了所有国家公园以及访问状态。

var parksList = new Vue({\n  el: "#parks",\n  data: {\n    parks: [\n      { name: "Acadia", state: "Maine", status: "Pending" },\n      { name: "American Samoa", state: "American Samoa", status: "Pending" },\n      { name: "Arches", state: "Utah", status: "Visited" },\n      ...\n

根据状态文本（“待处理”与“已访问”），我想有条件地将两个顺风类应用于以下跨度。

<span class="py-1 px-3 rounded-full text-xs">{{park.status}}</span>\n

\n
• 如果status = "Pending" \xe2\x80\x94> 应用类bg-purple-200和\n text-purple-600
\n
• 如果status = "Visited" \xe2\x80\x94> 应用类bg-green-200和text-green-600
\n

这可以使用 v-bind:class 和 …

我正在尝试将细分分析提供的代码片段添加到其中nuxt.config.js，但出现以下错误：

FATAL $config 未定义

我究竟做错了什么？

nuxt.config.js：

head: {
  script: [
    {
      hid: 'segment-script',
      innerHTML: `
        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)...
        analytics.load(${this.$config.segmentApiSecret});
        analytics.page();
        }}();
      `,
      type: 'text/javascript',
      charset: 'utf-8'
    }
  ]
},
privateRuntimeConfig: {
  segmentApiSecret: process.env.SEGMENT_API_SECRET
},

我正在努力解决项目的 nuxt 文件夹/路由结构：

我想要实现： 所有这些都应该显示pages/data/index.vue：

www.example.com/data 
www.example.com/data/region
www.example.com/data/region/industry

然后通过 访问参数区域或行业$route-class。

如果我添加_region文件夹和_industy.vue它会显示这些文件，并且我想显示和使用index.vue.

所以我想使用 NuxtJs 框架使用 VueJs 制作一个 Web 套接字客户端，这是我的组件

export default {
  data() {
    return {
      connection: null,
    }
  },
  created() {
    console.log("Starting connection to WebSocket Server")
    this.connection = new WebSocket("wss://echo.websocket.org")

    this.connection.onmessage = function(event) {
      console.log(event);
    }

    this.connection.onopen = function(event) {
      console.log(event)
      console.log("Successfully connected to the echo websocket server...")
    }
  },
  head() {
    return {
      title: 'Web Socket',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Web socket'
        }
      ]
    }
  }
}

我收到了这条消息

我正在使用 Ms Edge 作为浏览器，我尝试使用 vue-native-socket 和其他套接字包，但仍然收到相同的错误“Websocket 未定义”

我有一个电子商务网站，我想循环 json 中的嵌套数据。我尝试了很多东西但找不到。

async fetch() {
    this.post = await fetch(
      `http://test.com/api.php?id=${this.$route.params.id}`
    ).then((res) => res.json())
  }

我这样使用；

<h3>{{ post.title }}</h3>
<li v-for="(index, post.sizes) in sizes" :key="index">
        {{ sizes.index }}
      </li>

我的 json 数据是："sizes": "[\"XS\",\"S\",\"M\",\"L\"]",

感谢您的帮助。

当我从 nuxtjs 发送登录请求时，我在后端使用 laravel/passport 进行身份验证，并使用 nuxtjs 作为前端，如果登录成功，我将返回令牌和用户信息作为响应，然后用户将被重定向到/profile页面，但是/profile当我返回时在页面 中this.$auth.loggedIn我得到了false！

登录.vue

<script>
export default {
  data() {
    return {
      auth: false,
      email: "",
      password:""
    }
  },
  methods: {
    async login() {
      try {
        const data = { email: this.email, password: this.password }
        await this.$auth.loginWith('local', { data:data})
        .then(() => this.$router.push('/profile'))
      } catch (e) {
      }
    }
  }
}
</script>

配置文件.vue

<template>
  <div class="mt-6">loggedInUser: {{ loggedInUser }}</div>
</template>

<script>
export default{
  data() {
    return {
      loggedInUser:this.$auth.loggedIn …

我不想遵循将环境变量（.env文件）放在 Nuxt 项目的根目录中的约定。

How can I achieve another directory or even name for it without using the @nuxtjs/dotenv module? (I know this one is already baked into Nuxt since v2.13 and hence, not needed anymore).

我已经搜索了一段时间但似乎无法找到正确的答案。我有一个基本的 Nuxt 项目，具有以下目录结构（忽略fun.vue）：

这个想法是能够导航到具有以下路径的单个帖子http://localhost:3000/posts/1

这是可行的，如果我手动转到.../posts/1我的页面，则定义在_id.vue.

问题是，在我的索引页面中，我无法进入<NuxtLink>单个帖子页面。我有一个基本的 v-for 循环遍历我获取的 posts 数组，如下所示：

<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      {{ post.title }}
      <NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
    </div>
  </div>
</template>

例如，我希望在单击第二篇文章的链接后导航到posts/2，但我得到的是/%60posts/$%7Bpost.id%7D%60。为什么模板字符串不能正常转换？我也尝试过使用计算值，但没有成功，并且 Nuxt 路由文档也没有多大帮助。

非常感谢任何与此相关的帮助。

我正在使用vue-awesome-swiper但最近我在移动设备上遇到了一些问题（我有一个按钮轮播，当我单击其中一个按钮时，单击 btn 需要大约一两秒的时间）并且作为该包自2020年以来一直没有更新并且仍在使用swiper v5，我决定使用Swiper js本身。我已经按照文档中的说明进行操作，但出现dependency not found错误

包.json

{
  "name": "myapp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "dev:host": "nuxt --hostname 0.0.0.0 --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/device": "^2.1.0",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "swiper": "^7.0.9",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1",
    "@mdi/font": "^5.9.55",
    "@nuxtjs/dotenv": "^1.4.1",
    "noty": "^3.2.0-beta",
    "nuxt-gsap-module": "^1.2.1",
    "sass": "1.32.13"
  }
}

测试.vue

<template>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" …