问:
Headless UI Dropdown - Open menu above the button
Headless UI provides an example for a dropdown menu, where when you click the button, the dropdown opens below.

The code for this is here:

```<code>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 scale-95"
          enterTo="transform opacity-100 scale-100"
          leave="transition ease-in duration-75"
          leaveFrom="transform opacity-100 scale-100"
          leaveTo="transform opacity-0 scale-95"
        >
          <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
            <div className="px-1 py-1 ">
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <EditActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <EditInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Edit
                  </button>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <DuplicateActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <DuplicateInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Duplicate
                  </button>
                )}
              </Menu.Item>
            </div>
            <div className="px-1 py-1">
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <ArchiveActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <ArchiveInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Archive
                  </button>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <MoveActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <MoveInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Move
                  </button>
                )}
              </Menu.Item>
            </div>
            <div className="px-1 py-1">
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <DeleteActiveIcon
                        className="w-5 h-5 mr-2 text-violet-400"
                        aria-hidden="true"
                      />
                    ) : (
                      <DeleteInactiveIcon
                        className="w-5 h-5 mr-2 text-violet-400"
                        aria-hidden="true"
                      />
                    )}
                    Delete
                  </button>
                )}
              </Menu.Item>
            </div>
          </Menu.Items>
        </Transition>
      </Menu>
    </div>
  )
}

function EditInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 13V16H7L16 7L13 4L4 13Z"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
    </svg>
  )
}

function EditActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 13V16H7L16 7L13 4L4 13Z"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
    </svg>
  )
}

function DuplicateInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 4H12V12H4V4Z"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <path
        d="M8 8H16V16H8V8Z"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
    </svg>
  )
}

function DuplicateActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 4H12V12H4V4Z"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <path
        d="M8 8H16V16H8V8Z"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
    </svg>
  )
}

function ArchiveInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="8"
        width="10"
        height="8"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <rect
        x="4"
        y="4"
        width="12"
        height="4"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function ArchiveActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="8"
        width="10"
        height="8"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <rect
        x="4"
        y="4"
        width="12"
        height="4"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function MoveInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 4H16V10" stroke="#A78BFA" strokeWidth="2" />
      <path d="M16 4L8 12" stroke="#A78BFA" strokeWidth="2" />
      <path d="M8 6H4V16H14V12" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function MoveActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 4H16V10" stroke="#C4B5FD" strokeWidth="2" />
      <path d="M16 4L8 12" stroke="#C4B5FD" strokeWidth="2" />
      <path d="M8 6H4V16H14V12" stroke="#C4B5FD" strokeWidth="2" />
    </svg>
  )
}

function DeleteInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="6"
        width="10"
        height="10"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <path d="M3 6H17" stroke="#A78BFA" strokeWidth="2" />
      <path d="M8 6V4H12V6" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function DeleteActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="6"
        width="10"
        height="10"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <path d="M3 6H17" stroke="#C4B5FD" strokeWidth="2" />
      <path d="M8 6V4H12V6" stroke="#C4B5FD" strokeWidth="2" />
    </svg>
  )
}
</code>```

What I need to do is to have the dropdown menu open above the button instead of below. Something like below:

Can anyone please help me figure out the correct styling to achieve this? It uses TailwindCSS styles.

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

export default function Example() {
    return (

                <Menu as="div" className="relative inline-block text-left">

                        <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>

                    <Transition
                        as={Fragment}
                        enter="transition ease-out duration-100"
                        enterFrom="transform opacity-0 scale-95"
                        enterTo="transform opacity-100 scale-100"
                        leave="transition ease-in duration-75"
                        leaveFrom="transform opacity-100 scale-100"
                        leaveTo="transform opacity-0 scale-95"
                    >
                        <Menu.Items className="-top-2 transform -translate-y-full absolute right-0 w-56 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">

                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <EditActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <EditInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Edit
                                        </button>
                                    )}
                                </Menu.Item>
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <DuplicateActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <DuplicateInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Duplicate
                                        </button>
                                    )}
                                </Menu.Item>

                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <ArchiveActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <ArchiveInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Archive
                                        </button>
                                    )}
                                </Menu.Item>
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <MoveActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <MoveInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Move
                                        </button>
                                    )}
                                </Menu.Item>

                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <DeleteActiveIcon
                                                    className="w-5 h-5 mr-2 text-violet-400"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <DeleteInactiveIcon
                                                    className="w-5 h-5 mr-2 text-violet-400"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Delete
                                        </button>
                                    )}
                                </Menu.Item>

                        </Menu.Items>
                    </Transition>
                </Menu>

    )
}

function EditInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 13V16H7L16 7L13 4L4 13Z"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
        </svg>
    )
}

function EditActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 13V16H7L16 7L13 4L4 13Z"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
        </svg>
    )
}

function DuplicateInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 4H12V12H4V4Z"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <path
                d="M8 8H16V16H8V8Z"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
        </svg>
    )
}

function DuplicateActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 4H12V12H4V4Z"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <path
                d="M8 8H16V16H8V8Z"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
        </svg>
    )
}

function ArchiveInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="8"
                width="10"
                height="8"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <rect
                x="4"
                y="4"
                width="12"
                height="4"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function ArchiveActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="8"
                width="10"
                height="8"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <rect
                x="4"
                y="4"
                width="12"
                height="4"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function MoveInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path d="M10 4H16V10" stroke="#A78BFA" strokeWidth="2" />
            <path d="M16 4L8 12" stroke="#A78BFA" strokeWidth="2" />
            <path d="M8 6H4V16H14V12" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function MoveActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path d="M10 4H16V10" stroke="#C4B5FD" strokeWidth="2" />
            <path d="M16 4L8 12" stroke="#C4B5FD" strokeWidth="2" />
            <path d="M8 6H4V16H14V12" stroke="#C4B5FD" strokeWidth="2" />
        </svg>
    )
}

function DeleteInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="6"
                width="10"
                height="10"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <path d="M3 6H17" stroke="#A78BFA" strokeWidth="2" />
            <path d="M8 6V4H12V6" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function DeleteActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="6"
                width="10"
                height="10"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <path d="M3 6H17" stroke="#C4B5FD" strokeWidth="2" />
            <path d="M8 6V4H12V6" stroke="#C4B5FD" strokeWidth="2" />
        </svg>
    )
}```

What I changed was <Menu.Items className="-top-2 transform -translate-y-full absolute right-0 w-56 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">

please checkout if it works as you prefer.

Body:
Headless UI provides an example for a dropdown menu, where when you click the button, the dropdown opens below.

The code for this is here:

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

export default function Example() {
  return (

      <Menu as="div" className="relative inline-block text-left">

          <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>

        <Transition
          as={Fragment}
          enter="transition ease-out duration-100"
          enterFrom="transform opacity-0 scale-95"
          enterTo="transform opacity-100 scale-100"
          leave="transition ease-in duration-75"
          leaveFrom="transform opacity-100 scale-100"
          leaveTo="transform opacity-0 scale-95"
        >
          <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">

              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <EditActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <EditInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Edit
                  </button>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <DuplicateActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <DuplicateInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Duplicate
                  </button>
                )}
              </Menu.Item>

              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <ArchiveActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <ArchiveInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Archive
                  </button>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <MoveActiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    ) : (
                      <MoveInactiveIcon
                        className="w-5 h-5 mr-2"
                        aria-hidden="true"
                      />
                    )}
                    Move
                  </button>
                )}
              </Menu.Item>

              <Menu.Item>
                {({ active }) => (
                  <button
                    className={`${
                      active ? 'bg-violet-500 text-white' : 'text-gray-900'
                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                  >
                    {active ? (
                      <DeleteActiveIcon
                        className="w-5 h-5 mr-2 text-violet-400"
                        aria-hidden="true"
                      />
                    ) : (
                      <DeleteInactiveIcon
                        className="w-5 h-5 mr-2 text-violet-400"
                        aria-hidden="true"
                      />
                    )}
                    Delete
                  </button>
                )}
              </Menu.Item>

          </Menu.Items>
        </Transition>
      </Menu>

  )
}

function EditInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 13V16H7L16 7L13 4L4 13Z"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
    </svg>
  )
}

function EditActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 13V16H7L16 7L13 4L4 13Z"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
    </svg>
  )
}

function DuplicateInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 4H12V12H4V4Z"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <path
        d="M8 8H16V16H8V8Z"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
    </svg>
  )
}

function DuplicateActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 4H12V12H4V4Z"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <path
        d="M8 8H16V16H8V8Z"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
    </svg>
  )
}

function ArchiveInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="8"
        width="10"
        height="8"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <rect
        x="4"
        y="4"
        width="12"
        height="4"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function ArchiveActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="8"
        width="10"
        height="8"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <rect
        x="4"
        y="4"
        width="12"
        height="4"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function MoveInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 4H16V10" stroke="#A78BFA" strokeWidth="2" />
      <path d="M16 4L8 12" stroke="#A78BFA" strokeWidth="2" />
      <path d="M8 6H4V16H14V12" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function MoveActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 4H16V10" stroke="#C4B5FD" strokeWidth="2" />
      <path d="M16 4L8 12" stroke="#C4B5FD" strokeWidth="2" />
      <path d="M8 6H4V16H14V12" stroke="#C4B5FD" strokeWidth="2" />
    </svg>
  )
}

function DeleteInactiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="6"
        width="10"
        height="10"
        fill="#EDE9FE"
        stroke="#A78BFA"
        strokeWidth="2"
      />
      <path d="M3 6H17" stroke="#A78BFA" strokeWidth="2" />
      <path d="M8 6V4H12V6" stroke="#A78BFA" strokeWidth="2" />
    </svg>
  )
}

function DeleteActiveIcon(props) {
  return (
    <svg
      {...props}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="5"
        y="6"
        width="10"
        height="10"
        fill="#8B5CF6"
        stroke="#C4B5FD"
        strokeWidth="2"
      />
      <path d="M3 6H17" stroke="#C4B5FD" strokeWidth="2" />
      <path d="M8 6V4H12V6" stroke="#C4B5FD" strokeWidth="2" />
    </svg>
  )
}

What I need to do is to have the dropdown menu open above the button instead of below. Something like below:

Can anyone please help me figure out the correct styling to achieve this? It uses TailwindCSS styles.

Body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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 scale-95"
                        enterTo="transform opacity-100 scale-100"
                        leave="transition ease-in duration-75"
                        leaveFrom="transform opacity-100 scale-100"
                        leaveTo="transform opacity-0 scale-95"
                    >
                        <Menu.Items className="-top-2 transform -translate-y-full absolute right-0 w-56 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                            <div className="px-1 py-1 ">
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <EditActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <EditInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Edit
                                        </button>
                                    )}
                                </Menu.Item>
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <DuplicateActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <DuplicateInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Duplicate
                                        </button>
                                    )}
                                </Menu.Item>
                            </div>
                            <div className="px-1 py-1">
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <ArchiveActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <ArchiveInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Archive
                                        </button>
                                    )}
                                </Menu.Item>
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <MoveActiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <MoveInactiveIcon
                                                    className="w-5 h-5 mr-2"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Move
                                        </button>
                                    )}
                                </Menu.Item>
                            </div>
                            <div className="px-1 py-1">
                                <Menu.Item>
                                    {({ active }) => (
                                        <button
                                            className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'
                                                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                                        >
                                            {active ? (
                                                <DeleteActiveIcon
                                                    className="w-5 h-5 mr-2 text-violet-400"
                                                    aria-hidden="true"
                                                />
                                            ) : (
                                                <DeleteInactiveIcon
                                                    className="w-5 h-5 mr-2 text-violet-400"
                                                    aria-hidden="true"
                                                />
                                            )}
                                            Delete
                                        </button>
                                    )}
                                </Menu.Item>
                            </div>
                        </Menu.Items>
                    </Transition>
                </Menu>
            </div>

    )
}

function EditInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 13V16H7L16 7L13 4L4 13Z"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
        </svg>
    )
}

function EditActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 13V16H7L16 7L13 4L4 13Z"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
        </svg>
    )
}

function DuplicateInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 4H12V12H4V4Z"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <path
                d="M8 8H16V16H8V8Z"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
        </svg>
    )
}

function DuplicateActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4 4H12V12H4V4Z"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <path
                d="M8 8H16V16H8V8Z"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
        </svg>
    )
}

function ArchiveInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="8"
                width="10"
                height="8"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <rect
                x="4"
                y="4"
                width="12"
                height="4"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function ArchiveActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="8"
                width="10"
                height="8"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <rect
                x="4"
                y="4"
                width="12"
                height="4"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <path d="M8 12H12" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function MoveInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path d="M10 4H16V10" stroke="#A78BFA" strokeWidth="2" />
            <path d="M16 4L8 12" stroke="#A78BFA" strokeWidth="2" />
            <path d="M8 6H4V16H14V12" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function MoveActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path d="M10 4H16V10" stroke="#C4B5FD" strokeWidth="2" />
            <path d="M16 4L8 12" stroke="#C4B5FD" strokeWidth="2" />
            <path d="M8 6H4V16H14V12" stroke="#C4B5FD" strokeWidth="2" />
        </svg>
    )
}

function DeleteInactiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="6"
                width="10"
                height="10"
                fill="#EDE9FE"
                stroke="#A78BFA"
                strokeWidth="2"
            />
            <path d="M3 6H17" stroke="#A78BFA" strokeWidth="2" />
            <path d="M8 6V4H12V6" stroke="#A78BFA" strokeWidth="2" />
        </svg>
    )
}

function DeleteActiveIcon(props) {
    return (
        <svg
            {...props}
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <rect
                x="5"
                y="6"
                width="10"
                height="10"
                fill="#8B5CF6"
                stroke="#C4B5FD"
                strokeWidth="2"
            />
            <path d="M3 6H17" stroke="#C4B5FD" strokeWidth="2" />
            <path d="M8 6V4H12V6" stroke="#C4B5FD" strokeWidth="2" />
        </svg>
    )
}

What I changed was <Menu.Items className="-top-2 transform -translate-y-full absolute right-0 w-56 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">

please checkout if it works as you prefer.


来源: stackexchange

问:
what props are used for in vuejs
I came across this snippet of code:

  props: {
    clicks: {
      type: Object,
      default: null,
    }
    events: {
      type: Object,
      default: null,
    },
  }```

I didn't understand from where props are retreived, from database ? or received from another component ?

答:
In Vue Props are declared in the component script. They are passed from a parent component down to child component.

Here is an example of a Child Component accepting the value of username being passed from its parent component:

```<code><template>
 <div>
   {{username}}
 </div>
</template>

<script>
export default {
 props: ['username']
}
</script>
</code>```

Here is the Parent Component passing the "username" prop using a static variable:

```<code><child-component-name username='John Smith' />
</code>```

In many cases the parent component will bind and object making it dynamic. Here is the whole Parent Component Prop passing "username" to child with this example:

```<code><template>
 <div>
   <child-component-name :username="user.username" />
 </div>
</template>

<script>
import child-component-name from "@/components/ChildComponent.vue";

export default {
 components: {
   child-component-name
 },
 data() {
   return {
     user: {
       username: 'John Smith'
     }
   }
 }
}
</script>
</code>```

In your example the parent component is used to count the clicks and events then passes the values to the child component like the following:

```<code><child-component-name :clicks="yourClicks" :events="yourEvents" />
</code>```

ContentLicense: CC BY-SA 4.0

Title: what props are used for in vuejs

Body:
I came across this snippet of code:

  props: {
    clicks: {
      type: Object,
      default: null,
    }
    events: {
      type: Object,
      default: null,
    },
  }

I didn't understand from where props are retreived, from database ? or received from another component ?

Body:
In Vue Props are declared in the component script. They are passed from a parent component down to child component.

Here is an example of a Child Component accepting the value of username being passed from its parent component:

<template>
 <div>
   {{username}}
 </div>
</template>

<script>
export default {
 props: ['username']
}
</script>

Here is the Parent Component passing the "username" prop using a static variable:

<child-component-name username='John Smith' />

In many cases the parent component will bind and object making it dynamic. Here is the whole Parent Component Prop passing "username" to child with this example:

<template>
 <div>
   <child-component-name :username="user.username" />
 </div>
</template>

<script>
import child-component-name from "@/components/ChildComponent.vue";

export default {
 components: {
   child-component-name
 },
 data() {
   return {
     user: {
       username: 'John Smith'
     }
   }
 }
}
</script>

In your example the parent component is used to count the clicks and events then passes the values to the child component like the following:

<child-component-name :clicks="yourClicks" :events="yourEvents" />


问:
DRF: viewsets lookup_field ImproperlyConfigured
I'm migrating my DRF from generics to viewsets, but I receive this error:

```<code>Could not resolve URL for hyperlinked relationship using view name "monument-detail". You may have failed to include the related model in your API, or incorrectly configured the `lookup_field` attribute on this field.
</code>```

This is my urls.py

```<code>from app.api import views
from rest_framework import routers

router = routers.DefaultRouter()
router.register(r'monuments', views.MonumentsViewSet)

urlpatterns = router.urls
</code>```

This is my viewset

```<code>from app.api import serializers
from rest_framework import viewsets

class MonumentsViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.MonumentSerializer
    queryset = serializer_class.Meta.model.objects.all()
    lookup_field = 'id'
</code>```

And finally here my serializer

```<code>from app.api import models
from rest_framework import serializers

class MonumentSerializer(serializers.HyperlinkedModelSerializer):
    images = serializers.StringRelatedField(many=True)

    class Meta:
        model = models.Monument
        fields = '__all__'
</code>```

答:
Remove lookup_field = 'id'. I don't know why this happens, but it worked when I copied your code.

P.S Your error says, you incorrectly configured 'lookup_field'

Body:
I'm migrating my DRF from generics to viewsets, but I receive this error:

Could not resolve URL for hyperlinked relationship using view name "monument-detail". You may have failed to include the related model in your API, or incorrectly configured the `lookup_field` attribute on this field.

This is my urls.py

from app.api import views
from rest_framework import routers

router = routers.DefaultRouter()
router.register(r'monuments', views.MonumentsViewSet)

urlpatterns = router.urls

This is my viewset

from app.api import serializers
from rest_framework import viewsets

class MonumentsViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.MonumentSerializer
    queryset = serializer_class.Meta.model.objects.all()
    lookup_field = 'id'

And finally here my serializer

from app.api import models
from rest_framework import serializers

class MonumentSerializer(serializers.HyperlinkedModelSerializer):
    images = serializers.StringRelatedField(many=True)

    class Meta:
        model = models.Monument
        fields = '__all__'


问:
Add subdocument for each document in array dynamically
I want to $addField for every document in a sub-array with the name as arrayName_index (don't know how long the array is).

For example:
I have a collection of fun activities that looks like:

```<code>{
  _id: "1",
  activity: movie,
  attendees: [
    {firsName: "personA", lastName: "lasty"},
    {firsName: "personB", lastName: "namey"},
    {firsName: "personC", lastName: "blabla"}
  ]},
{
  _id: "2",
  activity: bowling,
  attendees: [{firsName: "personA", lastName: "lasty"}]
}
</code>```

I want a MongoDB aggregation to create output as:

```<code>{
  _id: "1",
  activity: movie,
  attendees: [
    {firsName: "personA", lastName: "lasty"},
    {firsName: "personB", lastName: "namey"},
    {firsName: "personC", lastName: "blabla"}
  ],
  attendees_1: {firsName: "personA", lastName: "lasty"},
  attendees_2: {firsName: "personB", lastName: "namey"},
  attendees_3: {firsName: "personC", lastName: "blabla"},
},
{
  _id: "2",
  activity: bowling,
  attendees: [{firsName: "personA", lastName: "lasty"}],
  attendees_1: {firsName: "personA", lastName: "lasty"}
}
</code>```

答:
A bit long and complex query.

Concept

1.0 $replaceRoot - Replace the input document to specific document

1.1 $mergeObjects - Merge current document ($$ROOT) with the object generated in 1.2.

1.2 $arrayToObject - Convert array to single document from 1.3.

1.3 $reduce - Iterate each element from the array and transform it to a single value.

1.4 $concatArrays - Merge array.

1.4.1 Create document with

1.4.1.1 k (key) with prefix "attendees_" and get the index of current iterate document ($indexOfArray) + 1.

1.4.1.2 v (value) with current iterate document.

```<code>db.collection.aggregate([
  {
    "$replaceRoot": {
      "newRoot": {
        "$mergeObjects": [
          "$$ROOT",
          {
            "$arrayToObject": {
              "$reduce": {
                "input": "$attendees",
                "initialValue": [],
                "in": {
                  "$concatArrays": [
                    "$$value",
                    [
                      {
                        k: {
                          "$concat": [
                            "attendees_",
                            {
                              "$toString": {
                                "$add": [
                                  {
                                    "$indexOfArray": [
                                      "$attendees",
                                      "$$this"
                                    ]
                                  },
                                  1
                                ]
                              }
                            }
                          ]
                        },
                        v: "$$this"
                      }
                    ]
                  ]
                }
              }
            }
          }
        ]
      }
    }
  }
])
</code>```

Sample Mongo Playground

Body:
I want to $addField for every document in a sub-array with the name as arrayName_index (don't know how long the array is).

For example:
I have a collection of fun activities that looks like:

{
  _id: "1",
  activity: movie,
  attendees: [
    {firsName: "personA", lastName: "lasty"},
    {firsName: "personB", lastName: "namey"},
    {firsName: "personC", lastName: "blabla"}
  ]},
{
  _id: "2",
  activity: bowling,
  attendees: [{firsName: "personA", lastName: "lasty"}]
}

I want a MongoDB aggregation to create output as:

{
  _id: "1",
  activity: movie,
  attendees: [
    {firsName: "personA", lastName: "lasty"},
    {firsName: "personB", lastName: "namey"},
    {firsName: "personC", lastName: "blabla"}
  ],
  attendees_1: {firsName: "personA", lastName: "lasty"},
  attendees_2: {firsName: "personB", lastName: "namey"},
  attendees_3: {firsName: "personC", lastName: "blabla"},
},
{
  _id: "2",
  activity: bowling,
  attendees: [{firsName: "personA", lastName: "lasty"}],
  attendees_1: {firsName: "personA", lastName: "lasty"}
}

Body:
A bit long and complex query.

Concept

1.0 $replaceRoot - Replace the input document to specific document

1.1 $mergeObjects - Merge current document ($$ROOT) with the object generated in 1.2.

1.2 $arrayToObject - Convert array to single document from 1.3.

1.3 $reduce - Iterate each element from the array and transform it to a single value.

1.4 $concatArrays - Merge array.

1.4.1 Create document with

1.4.1.1 k (key) with prefix "attendees_" and get the index of current iterate document ($indexOfArray) + 1.

1.4.1.2 v (value) with current iterate document.

db.collection.aggregate([
  {
    "$replaceRoot": {
      "newRoot": {
        "$mergeObjects": [
          "$$ROOT",
          {
            "$arrayToObject": {
              "$reduce": {
                "input": "$attendees",
                "initialValue": [],
                "in": {
                  "$concatArrays": [
                    "$$value",
                    [
                      {
                        k: {
                          "$concat": [
                            "attendees_",
                            {
                              "$toString": {
                                "$add": [
                                  {
                                    "$indexOfArray": [
                                      "$attendees",
                                      "$$this"
                                    ]
                                  },
                                  1
                                ]
                              }
                            }
                          ]
                        },
                        v: "$$this"
                      }
                    ]
                  ]
                }
              }
            }
          }
        ]
      }
    }
  }
])

Sample Mongo Playground


问:
Question about build.properties
I'm writing a program that uses JDBC and connects to a database and does some edits / deletes. I need to put the URL, username, and password fields into a build.properties file, but I'm not sure how this would look or how to really get this to work.
(I'm completely new to this and haven't found any resources related to this specifically)

For example, in my code I have something like this :

```<code>String username = "something"
String password = "something"
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@(DESCRIPTION=(ENABLE=BROKEN)" + "(FAILOVER=ON)(LOAD_BALANCE=ON)(ADDRESS=(PROTOCOL=TCP) ... etc", username, password);
</code>```

and I want to put this in build.properties and for my code to create the connection using these properties instead of how I'm doing it now.
Any help would be appreciated!

答:
Something like this:

First, create database.properties:

```<code>database.url = jdbc:mysql://host:port/database
database.driver = com.mysql.jdbc.Driver
database.username = username
database.password = password
</code>```

Second, put the database.properties in your CLASSPATH.

Code looks something like this:

```<code>InputStream is = this.getClass().getClassLoader().getResourceAsStream("database.properties");
Properties dbProperties = Properties.load(is);
Class.forName(dbProperties.getProperty("database.driver"));
Connection connection =     DriverManager.createConnection(dbProperties.getProperty("database.url"));
</code>```

I didn't compile it, and I'm not sure if the syntax is 100% correct, but this illustrates the main idea.

ContentLicense: CC BY-SA 3.0

Title: Question about build.properties

Body:
I'm writing a program that uses JDBC and connects to a database and does some edits / deletes. I need to put the URL, username, and password fields into a build.properties file, but I'm not sure how this would look or how to really get this to work.
(I'm completely new to this and haven't found any resources related to this specifically)

For example, in my code I have something like this :

String username = "something"
String password = "something"
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@(DESCRIPTION=(ENABLE=BROKEN)" + "(FAILOVER=ON)(LOAD_BALANCE=ON)(ADDRESS=(PROTOCOL=TCP) ... etc", username, password);

and I want to put this in build.properties and for my code to create the connection using these properties instead of how I'm doing it now.
Any help would be appreciated!

Body:
Something like this:

First, create database.properties:

database.url = jdbc:mysql://host:port/database
database.driver = com.mysql.jdbc.Driver
database.username = username
database.password = password

Second, put the database.properties in your CLASSPATH.

Code looks something like this:

InputStream is = this.getClass().getClassLoader().getResourceAsStream("database.properties");
Properties dbProperties = Properties.load(is);
Class.forName(dbProperties.getProperty("database.driver"));
Connection connection =     DriverManager.createConnection(dbProperties.getProperty("database.url"));

I didn't compile it, and I'm not sure if the syntax is 100% correct, but this illustrates the main idea.


问:
Special function in Google Sheet

Hi everyone, please advise.

I can't come up with a combination of functions (MATCH,LOOKUP,etc.) in Google Sheets that would return the row number of the cell that matches the given rule in the given range. Moreover, I need to find this value from bottom to top.

I am attaching an image in which I show the invented function "FIRST_VALUE", which in this particular case should return the value "5", because just 5 rows above is the value 655.79, which is higher than the rule ">655".

Thank you very much!

答:
To find the first value which match the criteria from the point where the formula is written, try

```<code>=query(arrayformula(sort({offset($A$1,,,row()),row(offset($A$1,,,row()))},2,0)),"select Col1 where Col1>655 order by Col2 desc limit 1")
</code>```

To get both the value and the number of rows, try

```<code>=query(arrayformula(sort({offset($A$1,,,row()),row(offset($A$1,,,row()))},2,0)),"select Col1, "&row()&"-Col2 where Col1>655 order by Col2 desc limit 1 label "&row()&"-Col2 '' ")
</code>```

Title: Special function in Google Sheet

Body:
To find the first value which match the criteria from the point where the formula is written, try

=query(arrayformula(sort({offset($A$1,,,row()),row(offset($A$1,,,row()))},2,0)),"select Col1 where Col1>655 order by Col2 desc limit 1")

To get both the value and the number of rows, try

=query(arrayformula(sort({offset($A$1,,,row()),row(offset($A$1,,,row()))},2,0)),"select Col1, "&row()&"-Col2 where Col1>655 order by Col2 desc limit 1 label "&row()&"-Col2 '' ")


问:
pip-compile raising AssertionError on its logging handler
I have a dockerfile that currently only installs pip-tools

```<code>FROM python:3.9

RUN pip install --upgrade pip && \
    pip install pip-tools

COPY ./ /root/project

WORKDIR /root/project

ENTRYPOINT ["tail", "-f", "/dev/null"]
</code>```

I build and open a shell in the container using the following commands:

```<code>docker build -t brunoapi_image .
docker run --rm -ti --name brunoapi_container --entrypoint bash brunoapi_image
</code>```

Then, when I try to run pip-compile inside the container I get this very weird error (full traceback):

```<code>root@727f1f38f095:~/project# pip-compile
Traceback (most recent call last):
  File "/usr/local/bin/pip-compile", line 8, in <module>
    sys.exit(cli())
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/decorators.py", line 26, in new_func
    return f(get_current_context(), *args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/piptools/scripts/compile.py", line 342, in cli
    repository = PyPIRepository(pip_args, cache_dir=cache_dir)
  File "/usr/local/lib/python3.9/site-packages/piptools/repositories/pypi.py", line 106, in __init__
    self._setup_logging()
  File "/usr/local/lib/python3.9/site-packages/piptools/repositories/pypi.py", line 455, in _setup_logging
    assert isinstance(handler, logging.StreamHandler)
AssertionError
</code>```

I have no clue what's going on and I've never seen this error before. Can anyone shed some light into this?

Running on macOS Monterey

答:
As of now, it is enough to upgrade pip-compile via:

pip install --upgrade pip-tools
```

since the bug @SEDaradji mentioned is resolved.

Body:
I have a dockerfile that currently only installs pip-tools

FROM python:3.9

RUN pip install --upgrade pip && \
    pip install pip-tools

COPY ./ /root/project

WORKDIR /root/project

ENTRYPOINT ["tail", "-f", "/dev/null"]

I build and open a shell in the container using the following commands:

docker build -t brunoapi_image .
docker run --rm -ti --name brunoapi_container --entrypoint bash brunoapi_image

Then, when I try to run pip-compile inside the container I get this very weird error (full traceback):

root@727f1f38f095:~/project# pip-compile
Traceback (most recent call last):
  File "/usr/local/bin/pip-compile", line 8, in <module>
    sys.exit(cli())
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/decorators.py", line 26, in new_func
    return f(get_current_context(), *args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/piptools/scripts/compile.py", line 342, in cli
    repository = PyPIRepository(pip_args, cache_dir=cache_dir)
  File "/usr/local/lib/python3.9/site-packages/piptools/repositories/pypi.py", line 106, in __init__
    self._setup_logging()
  File "/usr/local/lib/python3.9/site-packages/piptools/repositories/pypi.py", line 455, in _setup_logging
    assert isinstance(handler, logging.StreamHandler)
AssertionError

I have no clue what's going on and I've never seen this error before. Can anyone shed some light into this?

Running on macOS Monterey

Body:
As of now, it is enough to upgrade pip-compile via:

pip install --upgrade pip-tools

since the bug @SEDaradji mentioned is resolved.


问:
pycharm pip freeze issue
I'm doing a project in pycharm and I want to do pip freeze,but the result is a file with all python's lib and not just my project's depedncies.
I've noticed that my project is without venv.
I created one I did the pip freeze inside of it and got the same result.
How do I resolve this? how do I create a pip freeze with just my project's dependencies?

thank you all :)

答:
The pip freeze code only saves the packages that are installed with pip install in your environment.

```<code>pip freeze # all installed libs
</code>```

Instead you can use pipreqs

```<code>pip install pipreqs
pipreqs /home/project/location
</code>```

The file requirements will be like that

```<code>wheel==0.23.0
Yarg==0.1.9
docopt==0.6.2
</code>```

Reference: https://github.com/bndr/pipreqs

Title: pycharm pip freeze issue

Body:
The pip freeze code only saves the packages that are installed with pip install in your environment.

pip freeze # all installed libs

Instead you can use pipreqs

pip install pipreqs
pipreqs /home/project/location

The file requirements will be like that

wheel==0.23.0
Yarg==0.1.9
docopt==0.6.2

Reference: https://github.com/bndr/pipreqs


问:
All Font Awesome Icons showing as Shortcode
This is relating to the Wordpress site woodflooringkent.com.

I was attempting to knock off some of the Google Page Speed insight issues, one being the "Ensure text remains visible during webfont load". I added the font-display: swap; attribute to the fonts it was pointing out, one of them being webfonts/fa-solid-900.woff2 located within wp-content/plugins/js_composer/assets/lib/bower/font-awesome/css/all.min.css. Upon doing so, I discovered that all FA icons on the site were now displaying as their shortcodes (ie F007 instead of the person icon).

I immediately removed the offending code that I had added and purged the cache from the CDN, but the problem now persists.

Does anyone have any ideas how to reverse my stupidity?

答:
all.min.css is a generated source file and should not be edited.

Instead, edit the CSS source files all.min.css is generated from.

To remove your changes, regenerate all.min.css using the tools provided by your theme or page builder.
Judging by the the part of the provided path wp-content/plugins/js_composer and after a look at the mentioned website, it looks like that is WPBakery in your case.


问:
Grails: 'size' attribute is not working for <gui:autoComplete>
My question is regarding the autoComplete tag of grails-ui plugin. The size attribute to limit the size of the field is not working for the grails-ui autoComplete tag. Is it supposed to work or is the attribute not added to the taglib of autoComplete?</p>

答: If you go to http://svn.codehaus.org/grails-plugins/grails-grails-ui/trunk/grails-app/taglib/org/grails/grailsui/InputTagLib.groovy and check the method 'def autoComplete' your are going to see that there is no Size attribute, for that tag!</p>


问:
Vue Router - Nested Routes Not Working as Expected
I'm trying to create a simple nested routing:

App (root component, main navigation)

Topic1 (sub-navigation)

Topic1/Sub

Topic2

My demo on Codesandbox has the following issues:

1. When navigating from /topic1 to /topic1/sub, I expected the content from topic1 to show up and the content from topic1/sub to be shown below, like this:

However, Topic 1 does not show anymore.

2. How can I avoid showing "App" twice?

I know I've added path: "/topic1", component: App, but only because without it the routing did not work at all. As per the comments in router/index.js:

component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
```

I seem to be missing something essential - thank you already for any answers.

答:
App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn't use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.

Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:

Topic1

Topic1 Content

    <router-link to="/topic1/Sub">/topic1/sub</router-link>

<router-view> </router-view>
```

Here is the working codesandbox.
Also I refactored a bit your router index.js.

Body:
I'm trying to create a simple nested routing:

App (root component, main navigation)

Topic1 (sub-navigation)

Topic1/Sub

Topic2

My demo on Codesandbox has the following issues:

1. When navigating from /topic1 to /topic1/sub, I expected the content from topic1 to show up and the content from topic1/sub to be shown below, like this:

However, Topic 1 does not show anymore.

2. How can I avoid showing "App" twice?

I know I've added path: "/topic1", component: App, but only because without it the routing did not work at all. As per the comments in router/index.js:

component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once

I seem to be missing something essential - thank you already for any answers.

Body:
App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn't use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.

Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:

<h1>Topic1</h1>

<h2>Topic1 Content</h2>
<p>
    <router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>

Here is the working codesandbox.
Also I refactored a bit your router index.js.


问:
Extend C Drive with .bat file
I want to run a .bat file at first startup of Windows which will extend the primary hard drive space ( C: ) with all unallocated disk space.

I can do it manually using

```<code>diskpart
select volume 1
extend
</code>```

However when I put that in a .bat file and run it does nothing.

This is for Windows 2008 R2

答:
try make .bat file and put this code</p>
```<code>echo select disk 0 > Command.txt
echo select volume 1 >> Command.txt
echo extend >> Command.txt
diskpart.exe /s Command.txt
pause
</code>```

Title: Extend C Drive with .bat file

Body:
I want to run a .bat file at first startup of Windows which will extend the primary hard drive space ( C: ) with all unallocated disk space.

I can do it manually using

diskpart
select volume 1
extend

However when I put that in a .bat file and run it does nothing.

This is for Windows 2008 R2

Body:
try make .bat file and put this code

echo select disk 0 > Command.txt
echo select volume 1 >> Command.txt
echo extend >> Command.txt
diskpart.exe /s Command.txt
pause


答:
You have to activate your virtual env.

```<code># Create a virtual env
[...]$ python -m venv venv

# Activate your virtualenv
[...]$ source venv/bin/python

# Install your deps:
(venv) [...]$ pip install Django

# Freeze your env:
(venv) [...]$ pip freeze > requirements.txt
</code>```

Content of requirements.txt:

```<code>asgiref==3.5.0
Django==4.0.2
sqlparse==0.4.2
</code>```

Title: pycharm pip freeze issue

Body:
I'm doing a project in pycharm and I want to do pip freeze,but the result is a file with all python's lib and not just my project's depedncies.
I've noticed that my project is without venv.
I created one I did the pip freeze inside of it and got the same result.
How do I resolve this? how do I create a pip freeze with just my project's dependencies?

thank you all :)

Body:
You have to activate your virtual env.

# Create a virtual env
[...]$ python -m venv venv

# Activate your virtualenv
[...]$ source venv/bin/python

# Install your deps:
(venv) [...]$ pip install Django

# Freeze your env:
(venv) [...]$ pip freeze > requirements.txt

Content of requirements.txt:

asgiref==3.5.0
Django==4.0.2
sqlparse==0.4.2


问:
How to remove panels from button C#
I have created a function that creates a new panel each time a button is pressed, alongside with a button, which should remove the entire panel when pressed.

Here is my code for creating the panels and the button :

```<code>Panel panel;
        private void button1_Click(object sender, EventArgs e)
        {
            panel = new Panel();
            panel.BackColor = Color.FromArgb(38, 38, 38);
            panel.Margin = new System.Windows.Forms.Padding(10);
            flowLayoutPanel1.Controls.Add(panel);
            panel.Show();

            Button delbutton = new Button();
            delbutton.Text = "X";
            flowLayoutPanel1.Controls.Add(delbutton);

            delbutton.Click += new EventHandler(this.ButtonFunction_Click);
        }
</code>```

Considering that every panel created has this delbutton , how can i remove the panel of which delbutton button was pressed?

I tried to add this method to the button, but it removes panel randomly :

```<code>void ButtonFunction_Click (Object sender,EventArgs e)
        {

            foreach (Control controlObj in flowLayoutPanel1.Controls)
            {
                flowLayoutPanel1.Controls.Remove(controlObj);
                controlObj.Dispose();
            }
        }
</code>```

答:
You can add the relevant Panel as a Tag property of its Button, then you can get that in the Click handler

private void button1_Click(object sender, EventArgs e)
{
    var panel = new Panel
    {
        BackColor = Color.FromArgb(38, 38, 38),
        Margin = new Padding(10),
    };
    flowLayoutPanel1.Controls.Add(panel);
    panel.Show();

    var delbutton = new Button
    {
        Text = "X",
        Tag = panel,
    };
    delbutton.Click += ButtonFunction_Click;
    flowLayoutPanel1.Controls.Add(delbutton);
}

private void ButtonFunction_Click(Object sender, EventArgs e)
{
    var button = (Button)sender;
    ((Control)button.Tag).Dispose();
    button.Dispose();
}
```

Title: How to remove panels from button C#

Body:
I have created a function that creates a new panel each time a button is pressed, alongside with a button, which should remove the entire panel when pressed.

Here is my code for creating the panels and the button :

Panel panel;
        private void button1_Click(object sender, EventArgs e)
        {
            panel = new Panel();
            panel.BackColor = Color.FromArgb(38, 38, 38);
            panel.Margin = new System.Windows.Forms.Padding(10);
            flowLayoutPanel1.Controls.Add(panel);
            panel.Show();

            Button delbutton = new Button();
            delbutton.Text = "X";
            flowLayoutPanel1.Controls.Add(delbutton);

            delbutton.Click += new EventHandler(this.ButtonFunction_Click);
        }

Considering that every panel created has this delbutton , how can i remove the panel of which delbutton button was pressed?

I tried to add this method to the button, but it removes panel randomly :

void ButtonFunction_Click (Object sender,EventArgs e)
        {

            foreach (Control controlObj in flowLayoutPanel1.Controls)
            {
                flowLayoutPanel1.Controls.Remove(controlObj);
                controlObj.Dispose();
            }
        }


问:
ERROR TypeError: The 'compilation' argument must be an instance of Compilation
If I run npm run serve then this is what happened next.

```<code> INFO  Starting development server...
 ERROR  TypeError: The 'compilation' argument must be an instance of Compilation
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/anderson/@python/zeta-value/front/node_modules/webpack/lib/NormalModule.js:193:10)
    at /home/anderson/@python/zeta-value/front/node_modules/vue-loader/lib/plugin-webpack5.js:39:47
    at SyncHook.eval [as call] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)
    at new Watching (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:30:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! front@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the front@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/anderson/.npm/_logs/2021-06-26T14_20_10_454Z-debug.log
</code>```

Here is my package.json.

```<code>{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "apexcharts": "^3.27.1",
    "axios": "^0.21.1",
    "chart.js": "^3.3.2",
    "core-js": "^3.15.1",
    "vue": "^2.6.14",
    "vue-apexcharts": "^1.6.1",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@mdi/font": "^5.9.55",
    "@mdi/js": "^5.9.55",
    "@vue/cli": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "vue-cli-plugin-vuetify": "^2.4.1"
  }
}
</code>```

Is there anyone who experienced the same problem?

答:
I also encountered this error with webpack. I solved the problem by adding capital letters into the path to the directory in which the command is executed.

Let's take the following case:

I develop an application in the directory :

```<code>C:\Users\username\Desktop\myApp
</code>```

I compile the assets of this application with webpack. The Compilation type error is triggered if I execute the npm run dev command in c:\users\username\desktop\myapp because webpack can't find the node_modules folder. To fix the error you just have to run your command into the right directory with also capital letters.

```<code>C:\Users\username\Desktop\myApp> npm run dev
</code>```

Webpack should find the node_modules folder and you won't have any more errors.

Body:
If I run npm run serve then this is what happened next.

 INFO  Starting development server...
 ERROR  TypeError: The 'compilation' argument must be an instance of Compilation
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/anderson/@python/zeta-value/front/node_modules/webpack/lib/NormalModule.js:193:10)
    at /home/anderson/@python/zeta-value/front/node_modules/vue-loader/lib/plugin-webpack5.js:39:47
    at SyncHook.eval [as call] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)
    at new Watching (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:30:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! front@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the front@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/anderson/.npm/_logs/2021-06-26T14_20_10_454Z-debug.log

Here is my package.json.

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "apexcharts": "^3.27.1",
    "axios": "^0.21.1",
    "chart.js": "^3.3.2",
    "core-js": "^3.15.1",
    "vue": "^2.6.14",
    "vue-apexcharts": "^1.6.1",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@mdi/font": "^5.9.55",
    "@mdi/js": "^5.9.55",
    "@vue/cli": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "vue-cli-plugin-vuetify": "^2.4.1"
  }
}

Is there anyone who experienced the same problem?

Body:
I also encountered this error with webpack. I solved the problem by adding capital letters into the path to the directory in which the command is executed.

Let's take the following case:

I develop an application in the directory :

C:\Users\username\Desktop\myApp

I compile the assets of this application with webpack. The Compilation type error is triggered if I execute the npm run dev command in c:\users\username\desktop\myapp because webpack can't find the node_modules folder. To fix the error you just have to run your command into the right directory with also capital letters.

C:\Users\username\Desktop\myApp> npm run dev

Webpack should find the node_modules folder and you won't have any more errors.