小编Not*_*bot的帖子

所以在我的 Vue 项目中，我基本上有两个页面/组件，它们将根据 url 使用 vue-router 显示。我可以通过按钮在这些页面/组件之间切换。

我也在使用 vuex 来管理一些数据。

现在我在其中一个组件中加入了一个开关，用于在 vuetify 的深色和浅色主题之间切换。在此组件的模板中，我执行以下操作：

<v-switch
  label="Toggle dark them"
  @change="toggleDarkTheme()"
></v-switch>

在被调用的函数中，我这样做：

toggleDarkTheme() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
      console.log(this.$vuetify.theme.dark);
},

在 app.vue 中，我包含了<v-app dark>并且在我的 main.js 中，我有以下内容：

Vue.use(Vuetify);
const vuetify = new Vuetify({
  theme: {
    // dark: true,
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5, 
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base,
      },
    },
  },
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: …

我正在使用 Vuetify 和 Vue.js 开发导航抽屉。我正在这个抽屉中动态生成列表项。

每个列表项由一个图标、一个名称和一个删除图标组成。到目前为止，一切都已就绪，唯一的问题是，我无法让每个列表项内的 2 个图标和文本很好地垂直对齐。

我添加了一张图像，以便您可以看到它现在的样子。 图像

这是我的组件中的代码：

    <v-list>
      <v-list-item
        class="ui-navigation"
        v-for="(block, index) in layouts2"
        v-bind:key="`layout-button-${block._uid}`">
        <v-list-item-icon>
          <v-icon
          v-on:click="switchLayouts(block._uid)">
              mdi-home-city
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
        </v-list-item-content>

        <v-list-item-content>
          <v-btn icon
            v-on:click="deleteLayout(block._uid)"
          >
            <v-icon>mdi-delete-outline</v-icon>
          </v-btn>
        </v-list-item-content>
      </v-list-item>
    </v-list>

我很高兴能就这个可能很简单的问题提供任何帮助！

我正在尝试使用 WebRTC 将视频流式传输到浏览器。我收到的错误是WebRTC: ICE failed, add a STUN server and see about:webrtc for more details. 这对我来说有点令人惊讶，因为在我的代码中，我在对等连接的配置对象中提到了谷歌 STUN 服务器之一，如下所示：

const config = {
        iceServers: [
          {
            urls: ['stun:stun.l.google.com:19302']
          }
        ]
      };

我已经在 PC 上对此进行了测试，该项目正在运行并且能够在那里看到流。现在我想通过 ssh 隧道访问该网站。我转发了端口，现在可以在浏览器中打开 localhost:4000 并查看网站，但是视频不会显示，我会收到所描述的错误。

如何将视频也传输到远程 PC，或者为什么它无法通过 ssh 隧道工作？提前致谢！

我正在开发具有拖放功能的网络应用程序。到目前为止，我使用的是基本的 HTML5 拖动，但现在我转而使用库interact.js。

我不知道我的问题是特定于这个库还是更一般的类型：拖放时的事件通常会触发多次（如果我没看错，它似乎也总是恰好 4 次，但不能保证那）。

我也在使用 Vue.js，这是我的代码：

<template>
    <v-card
      elevation="0"
      :id="id"
      class="board device-dropzone"
    >
        <slot class="row"/>
        <div
         Drop Card here
        </div>
    </v-card>
</template>

在插槽中，添加了带有文本的图像和 div。这也是脚本：

<script>
import interact from 'interactjs';

export default {
  name: 'Devices',
  props: ['id', 'acceptsDrop'],
  data() {
    return {
      extendedHover: false,
      hoverEnter: false,
      timer: null,
      totalTime: 2,
    };
  },
  methods: {
    resetHover() {
      alert('reset');
    },
    drop(e) {
      let wantedId = e.relatedTarget.id.split('-')[0];
      console.log(wantedId);
      console.warn(e.target);
      e.target.classList.remove('hover-drag-over');
      this.extendedHover = false;
      console.log('-------------dropped');
      console.warn('dropped onto device');
      this.$emit('dropped-component', cardId);
      e.target.classList.remove('hover-drag-over'); */
    }, …