小编gil*_*gil的帖子

我尝试使用vue-socket.io从VUE客户端连接到两个不同的网络套接字服务器，如下所示：

import { store } from '@/store/store'
import { store2 } from '@/store/store2'

Vue.use(Vuex)

Vue.use(VueSocketio, 'http://192.168.1.101:8000', store)
Vue.use(VueSocketio, 'http://192.168.1.102:8001', store2)

我已经创建了2个存储文件，store.js并且store2.js

实际上，第一Vue.use(VueSocketio…条线可以连接并正常工作，但是第二条线则不能。因此在上例中Port 8000连接但没有Port 8001。当我交换时，两条线Port 8001将连接，但Port 8000不会。

我发现的所有示例仅处理一台Web套接字服务器，并且工作正常。使用VUE客户端连接到多个Web套接字服务器的最佳实践是什么？

知道我如何建立联系吗？

我正在使用 Webpack + Vue + vue-fontawesome。

下面的代码工作正常并显示图标。

import @fortawesome/free-solid-svg-icons

但是这个不显示图标。

import faCalendarCheck component in @fortawesome/free-regular-svg-icons 

类似地，中的其他组件@fortawesome/free-regular-svg-icons不起作用。组件会渲染 HTML 的注释行<\!---->。

为什么@fortawesome/free-regular-svg-icons 不起作用？

主文件

// Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import {
    faThLarge,
    // faCalendarCheck,
    faBell,
    faAddressBook,
    faCalculator,
    faSitemap,
    faEnvelope,
    faWindowMaximize,
    faFileAlt,
    faNewspaper,
} from '@fortawesome/free-solid-svg-icons';
import {
    faCalendarCheck,
} from '@fortawesome/free-regular-svg-icons';

library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);

应用程序

<template>
    <font-awesome-icon icon="calendar-check" />
</template> …

<v-btn-toggle v-model="toggle_one">
   <v-btn flat>
      USD50
   </v-btn>
   <v-btn flat>
      USD100
   </v-btn>
   <v-btn flat>
      USD1000
   </v-btn>
   <v-btn flat>
      USD10000
   </v-btn>

用户只能选择一个选项。如何获取所选按钮的值？

我正在尝试运行 Angular 单元测试。我想配置 karma.config 文件不打开 headless chrome。只是我想单独查看终端中的输出。

我尝试在karma.config中注释下面的代码行...

reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false

reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false

运行测试不应打开无头镀铬

目前我有单独的组件CreateUser.vue和EditUser.vue非常大的形式。

• 路线CreateUserIS/users
• 的路线EditUser是/users/:username。

后端 API 也不同：

• POST 用于创建 ( example.com/users) 和
• PUT 进行编辑 ( example.com//users/:username)。

同样在EditUser,username字段是只读的，因为它一旦创建就无法编辑，否则两者CreateUser和EditUser模板都是相同的，但 Javascript 部分是不同的。

题：

我怎样才能将它组合成一个 Component UserForm.vue并消除CreateUser.vue和EditUser.vue？

在主 UI 中，有一个Create User路由到CreateUser组件的按钮。在用户列表视图中，每一行都有一个Edit路由到EditUser组件的按钮。

我正在使用 Vue 路由器来定义类似于下面的路由：

{
   path: '/users',
   name: 'createUser',
   component: CreateUser
},
{
   path: '/users/:id',
   component: EditUser,
   name: …

我正在开发一个 Vue 应用程序。我在我的应用程序中使用了这个官方示例中的bootstrap-vue 导航栏。但是，当我在控制台中运行我的项目时，Vue 不断警告我有关<b-nav-brand>我已包含在我的main.js.

如果您有任何想法，这是我的设置。

错误：

[Vue 警告]：未知的自定义元素：-您
是否正确注册了组件？对于递归组件，请确保在
此处提供输入代码在此处输入代码的“名称”选项。

导航栏代码：

<b-navbar class="nav-bar" toggleable="sm">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-nav-brand class="logo" href="#">
      <img src="/static/images/boost-icon.svg" alt="Boost icon"/>
      <h1>Portal</h1>
    </b-nav-brand>
    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="">
          <span class="btn btn-primary btn-request-access">Request Access</span>
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

主.JS：

Vue.use(BootstrapVue)
new Vue({
  el: '#app',
  router: router,
  template: '<App/>',
  store: store,
  components: {
    App
  }
})

我需要向VuetifyJS list添加一个简单的搜索和排序功能。这是列表的 CodePen 示例：https ://codepen.io/anon/pen/bxGGgv

在 VueJS 2 中执行此操作的标准方法是什么？

HTML：

<v-list two-line>
  <template v-for="(item, index) in items">
      <v-list-tile
        :key="item.title"
        avatar
        ripple
        @click="toggle(index)"
      >
        <v-list-tile-content>
           <v-list-tile-title>{{ item.title }}</v-list-tile-title>
           <v-list-tile-sub-title class="text--primary">
               {{ item.headline }}
           </v-list-tile-sub-title>
           <v-list-tile-sub-title>{{ item.subtitle }}</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-divider
        v-if="index + 1 < items.length"
        :key="index"
      ></v-divider>
  </template>
</v-list>

JS：

  export default {
    data () {
      return {
        selected: [2],
        items: [
          {
            action: '15 min',
            headline: 'Brunch this weekend?',
            title: 'Ali Connors',
            subtitle: "I'll be in your …