小编asa*_*nas的帖子

我有以下代码,我收到错误'Duplicate Declaration query_url'.

  switch(condition) {
    case 'complex':
      const query_url = `something`;
      break;
    default:
      const query_url = `something`;
      break;
  }

我知道query_url被声明了两次,这是不对的.但我不知道如何解决这个问题.有人可以帮助确定这项工作的正确方法吗？

我有一个自定义 JavaScript，用于在我的 NextJS 网站上运行广告。这是由广告提供商/广告交易平台提供的。

它看起来像这样：

<script type="text/javascript" src="//cdn.adsite.com/static/js/ad.js" ></script>

除此之外，我还在网页上放置了 div 标签，例如：

<div id="ad-tag-6098" ></div>
<div id="ad-tag-6099" ></div>
<div id="ad-tag-6076" ></div>

这三个 div 标签是页面上的三个广告位，并使用 ad.js javascript 填充广告。

这对于页面的正常加载/重新加载效果很好。

但是，当我使用内部导航路由器导航到页面时，不会触发此 JavaScript，并且不会显示广告。

重新加载 ad.js 以便 div 标签（广告位）正确显示广告，并且即使我们通过 nextjs 路由器导航也能正确刷新的正确方法是什么？你能帮忙吗？

更新：这个问题比我想象的还要深。仅仅重新加载 javascript 是不够的。由于这些是广告位，当页面转换/路线改变时，使用的广告位保留在内存中，因此广告脚本将它们视为已经显示。这会导致错误。

期望的行为如下：

1. 当广告组件呈现时，它定义广告位并显示它，
2. 当路由改变时，所有定义的槽都会从内存中删除，
3. 进入不同页面后，该页面上的广告组件会定义新的广告位并显示它们。

Headless UI 提供了一个下拉菜单示例，当您单击按钮时，下拉菜单将在下面打开。

其代码在这里：

import { Menu, Transition } from '@headlessui/react'
import { Fragment, useEffect, useRef, useState } from 'react'
import { ChevronDownIcon } from '@heroicons/react/solid'

export default function Example() {
  return (
    <div className="w-56 text-right fixed top-16">
      <Menu as="div" className="relative inline-block text-left">
        <div>
          <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
            Options
            <ChevronDownIcon
              className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
              aria-hidden="true"
            />
          </Menu.Button>
        </div>
        <Transition
          as={Fragment}
          enter="transition ease-out duration-100"
          enterFrom="transform opacity-0 …

我正在使用Nuxt.js，并且有一个动态页面，该页面在

pages/post/_slug.vue

因此，当我访问页面URL（例如http：// localhost：3000 / post / hello-world）时，如何读取页面中的此slug参数值。

目前，我正在使用asyncData获得它，如下所示：

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

这很好用，但是我认为这不是最好的方法，应该有一种更好的方法使参数对页面可用。任何帮助表示赞赏！

我正在使用Nuxt.js/Vuejs for mmy app,我在不同的地方一直面临这个错误:

    The client-side rendered virtual DOM tree is not matching server-rendered content. 
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. 
Bailing hydration and performing full client-side render.

我想了解调试此错误的最佳方法是什么？他们是否可以为客户端和服务器记录/获取虚拟DOM树,以便我可以比较并找到错误所在的位置？

我的是一个大型应用程序,并且手动验证很困难.

我们已经构建了一个Nuxt/VueJS项目.

Nuxt有自己的配置文件nuxt.config.js,我们在其中配置webpack和其他构建设置.

在我们的package.json中,我们已经包含了lodash包.

在我们的代码中,我们一直小心加载只导入我们需要的东西,例如:

import orderBy from 'lodash/orderBy'

在nuxt.config.js,lodash添加到vendor列表中.

但是,当我们创建构建时,webpack总是包含整个lodash库,而不是仅包含我们在代码中使用的内容.

我已经阅读了很多教程,但还没有得到答案.如果它只是一个webpack项目,其中一些答案肯定会有效.但在我们的例子中,它是通过nuxt配置文件.

期待一些帮助.

下面是部分nuxt.config.js文件.仅包含相关/重要部分:

const resolve = require('resolve')
const webpack = require('webpack')

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
  },
  modules: [
    ['@nuxtjs/component-cache', { maxAge: 1000 * 60 * 10 }]
  ],
  plugins: [
    { src: '~/plugins/intersection', ssr: false },
  ],
  build: {
    vendor: ['moment', 'lodash'],
    analyze: {
      analyzerMode: 'static'
    },
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      } …

我有一个组件，如下所示：

export default {
  name: 'todos',
  props: ['id'],
  created () {
    this.fetchData()
  },
  data() {
    return {
    }
  },
  computed: {
    todos () {
      return this.$store.state.todos[this.id]
    }
  },
  methods: {
    async fetchData () {
      if (!this.$store.state.todos.hasOwnProperty(this.id)) {
        await this.$store.dispatch('getToDos', this.id)
      }
    }
  }
}

这就是正在发生的事情：

1. 该组件接收idvia 属性。

当组件加载时，我需要根据 id 获取一些数据

2. 我有一个created()钩子，可以从其中调用函数fetchData()来获取数据。

3. 在方法中，fetchData()函数调度一个操作来获取数据。这会获取数据并将其存储在 Vuex 存储中。

4. 计算属性todos获取此 id 的数据。

问题是，当页面首次加载时，计算属性todos显示为未定义。如果我更改页面（客户端），则计算属性将从存储中获取正确的数据并显示它。

我无法理解为什么计算属性不更新？

我从firestore获取了一些数据但在我的查询中我想添加一个条件where子句.我正在使用async-await for api而不确定如何添加consitional where子句.

这是我的功能

export async function getMyPosts (type) {
  await api
  var myPosts = []

  const posts = await api.firestore().collection('posts').where('status', '==', 'published')
    .get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        console.log(doc.data())
      })
    })
    .catch(catchError)
}

在我的主要功能中,我得到了一个名为'type'的参数.根据该参数的值,我想在上面的查询中添加另一个qhere子句.例如,if type = 'nocomments'然后我想添加一个where子句.where('commentCount', '==', 0)否则if type = 'nocategories',那么where子句将查询另一个属性,如.where('tags', '==', 'none')

我无法理解如何添加此条件where子句.

注意:在firestore中添加多个条件,只需添加where子句,如 - .where("state", "==", "CA").where("population", ">", 1000000)等等.

我正在开发一个 nextjs 项目，我必须实现用于自动广告的 google AdSense 代码。

所以，我的谷歌广告代码就是这样的：

<script
  async
  src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
  crossOrigin="anonymous"
/>

没有特定的广告单元代码。根据此脚本加载，Google 将自动添加广告。

在这种情况下，我将如何在我的 NextJS 项目中实现这一点，以确保广告在路线更改后继续正常工作？

目前，我看到的问题是，如果我只是将其放在头部_document.js，广告只会在完全重新加载时加载。有一些教程描述了如何在 NextJS 中实现 google Adsense，但它们都描述了为 Adsense 创建特定广告单元的情况，而不是单独基于此脚本的自动广告的情况。

非常感谢对此的任何意见。

我有一个要求，我需要在当地时区显示用户的时间。这需要使用 date-fns 来完成。

以下代码检查当前时间，然后根据时区将其转换为本地时间。

const { formatToTimeZone } = require('date-fns-timezone')

let date = new Date()
const format = 'D.M.YYYY HH:mm:ss [GMT]Z (z)'
const output = formatToTimeZone(date, format, { timeZone: 'Asia/Calcutta' })

但是，我如何即时猜测用户的时区？

在 中moment.js，您可以使用moment.tz.guess(). 但是我如何在没有moment.js和使用的情况下做到这一点date-fns？

https://runkit.com/embed/835tsn9a87so

更新：我将在 VueJS 应用程序中使用它。因此，如果有任何其他相关解决方案，也欢迎使用。谢谢。