小编And*_*huk的帖子

我用vue create命令创建了一个项目，更改了目录并使用了npm run serve命令。错误出现了。

我尝试更新npm软件包，但没有用。

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\peter\test\src\main.js: C:\Users\peter\test contains both browserslist and package.json with browsers (While processing: "C:\\Users\\peter\\test\\node_modules\\@vue\\babel-preset-app\\index.js")
    at C:\Users\peter\test\node_modules\browserslist\node.js:263:15
    at eachParent (C:\Users\peter\test\node_modules\browserslist\node.js:47:18)
    at Object.findConfig (C:\Users\peter\test\node_modules\browserslist\node.js:246:20)
    at Function.loadConfig (C:\Users\peter\test\node_modules\browserslist\node.js:177:37)
    at browserslist (C:\Users\peter\test\node_modules\browserslist\index.js:333:31)
    at getTargets (C:\Users\peter\test\node_modules\@babel\preset-env\lib\targets-parser.js:184:50)
    at getPolyfills (C:\Users\peter\test\node_modules\@vue\babel-preset-app\index.js:20:26)
    at module.exports (C:\Users\peter\test\node_modules\@vue\babel-preset-app\index.js:106:17)
    at loadDescriptor (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:165:14)
    at cachedFunction (C:\Users\peter\test\node_modules\@babel\core\lib\config\caching.js:33:19)
    at loadPresetDescriptor (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:235:63)
    at config.presets.reduce (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:74:38)
    at loadFullConfig (C:\Users\peter\test\node_modules\@babel\core\lib\config\full.js:108:6)
    at process.nextTick (C:\Users\peter\test\node_modules\@babel\core\lib\transform.js:28:33) …

我有一个抽屉式导航不将内容推到一边从移动它mini.variant来opened。

<v-navigation-drawer
  class="chatbar--gradient"
  app
  right
  :mini-variant.sync="closed"
  mini-variant-width="70"
  width="250px"
></v-navigation-drawer>

App.vue：

<v-app dark>
  <app-navbar></app-navbar>
  <navigation-bar></navigation-bar>
  <v-slide-y-transition>
    <chat-sidebar></chat-sidebar>**
    <!-- THIS IS THE MODAL FROM ABOVE -->
    **
  </v-slide-y-transition>
  <v-content>
    <keep-alive>
      <transition name="fade">
        <router-view :key="$route.fullPath" />
      </transition>
    </keep-alive>
    <display-name-entry-modal></display-name-entry-modal>
  </v-content>
  <v-footer v-if="$vuetify.breakpoint.smAndUp" tile padless height="3px" app class="pageFooter"></v-footer>
  <bottom-nav v-if="$vuetify.breakpoint.smAndDown"></bottom-nav>
</v-app>

问题：无法在单元测试中以编程方式触发 Vue-Select3 项目下拉选择。

我已经尝试使用vue-test-utils和@testing-library/vue以及在浏览器中以编程方式触发点击事件以强制选择列表项。然而，这些都没有奏效。我设法触发选择的唯一方法是获取 VueSelect 实例并发出“输入”事件。我还尝试在下拉容器等上触发不同的事件。

// Failed

// testing-library
const dropdownItem = getAllByTestId('dropdown-item')
fireEvent.click(dropdownItem[0])

// test-utils
wrapper.find('[data-testid=dropdown-item]').trigger('click')

// In browser
document.querySelectorAll('.vs__dropdown-item')[0].click()

// Success
wrapper.find(VueSelect).vm.$emit('input', payload)

当前结果：当点击事件被触发时，什么也不会发生。 预期结果：当点击事件被触发时，Vue-Select 应该选择该项目并发出 'input' 事件。

通常我在要使用该函数的组件中创建该函数，但是，我开始需要在两个或更多组件中使用某个函数，这意味着现在我必须将其复制并放置在其他组件。这显然不是最佳的，所以我想知道应该将这些函数放在哪里。为了向您展示通用实用函数的含义，我将在此处添加一个：

winrate(wins, losses) {
    let games = wins + losses
    return Math.round(wins * 100 / games) + '%'
}

没什么特别的，只是取胜负，然后返回胜率。

我正在使用 Vuex，实际上我可以将它们放在 Vuex 商店中，但是，我不确定这是否是最好的选择，所以这就是我问你们的原因。