小编sha*_*rma的帖子

基本上，问题是我有 4 个扩展面板，我希望第一个面板默认打开或展开，当我点击第二个面板时，第一个面板应该关闭。

在 vuetify doc 中，它们都有。一个是如何默认打开面板，第二个是，什么时候应该打开其他人应该关闭。

<template>
  <div>
 <div class="text-xs-center mb-3">{{ panel }}</div>    
 <v-expansion-panel
  expand
  v-model="panel">
  <v-expansion-panel-content
    v-for="(details,index) in marketCapDetails"
    :key="index">
    <template v-slot:header>
       <p>{{details.sr_no }}</p>
       <p>{{details.currency }}</p>
    </template>
    <v-card>
      #some code
    </v-card>      
  </v-expansion-panel-content>
</v-expansion-panel>

在我的脚本中

export default {   
  data() {
    return {
            panel:[true, false, false, false]
         }   
      }
}

我在 vuejs + vuetify 中有一个项目，该项目在 chrome 浏览器上运行良好，但是当我在 Internet Explorer 11 上运行该项目时，它只显示会话页面，当我点击登录按钮时，它给了我这个错误

未处理的承诺拒绝 SyntaxError: Expected ':'

在控制台中，我必须点击登录按钮两次才能进入应用程序。在这里我没有看到页面的主要内容，只显示侧边栏菜单并且没有呈现主要内容，我的控制台再次出现错误

未处理的承诺拒绝 NavigationDuplicated：不允许导航到当前位置（/dashboard/home/something）

这是我的package.json

  "dependencies": {
    "@types/leaflet": "^1.5.1",
    "algoliasearch": "^3.33.0",
    "amcharts3": "^3.21.14",
    "auth0-js": "^9.11.3",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.8.0",
    "echarts": "^4.2.1",
    "firebase": "^6.4.2",
    "instantsearch.css": "^7.3.1",
    "jquery": "^3.4.1",
    "leaflet": "^1.4.0",
    "moment": "^2.22.2",
    "nprogress": "^0.2.0",
    "screenfull": "^4.2.1",
    "slick-carousel": "^1.8.1",
    "velocity-animate": "^1.5.2",
    "vue": "^2.6.10",
    "vue-chartjs": "^3.4.2",
    "vue-count-to": "^1.0.13",
    "vue-croppa": "^1.3.8",
    "vue-draggable-resizable": "^2.0.0-rc1",
    "vue-echarts": "^4.0.3",
    "vue-fullcalendar": "^1.0.9",
    "vue-fullscreen": "^2.1.5",
    "vue-i18n": "^8.14.0",
    "vue-instantsearch": "^2.3.0",
    "vue-loading-spinner": "^1.0.11",
    "vue-notification": "^1.3.16", …

我正在创建一个 vuejs 应用程序，其中我想要两种不同的布局，例如一种用于用户界面，另一种用于管理界面。在用户界面中，我有一个名为“管理面板”的按钮，单击此按钮想要进入管理端并呈现新布局。到目前为止，我已经这样做了：

• 我在 src 中创建了一个容器文件夹来保存布局文件

  • 用户面板.vue
  • 管理面板.vue

• 还有一个路由器文件夹来保存路由文件

  • 用户.js
  • 管理.js
  • 索引.js

###UserPanel.js###

<template>
  <v-app> 
    <h4>User Layout</h4>
    <router-view></router-view>
  </v-app>
</template>
<script>
export default {
}
</script>

###AdminPanel.js###

<template>
  <v-app> 
    <h4>Admin Layout</h4>
    <router-view></router-view>
  </v-app>
</template>

<script>
export default {
}
</script>

###用户.js###

import UserPanel from 'Container/UserPanel';
const HomeV1 = () => import('Views/HomeV1');
const HomeV2 = () => import('Views/HomeV2');
const HomeV3 = () => import('Views/HomeV3');

export default{
  path: '/',
  component: UserPanel,
  redirect:'/home',
  children:[
    { 
        path: '/',               
        component: HomeV1 ,
        meta: {
            header: …

我在其中使用 vuejs 和 Websockets，所以我安装了这个包https://github.com/socketio/socket.io-client并遵循其官方文档https://socket.io/docs/client-api/

export default {
    mounted(){
        this.socket()
    },
    methods: {
        socket(){
            const socket = io('https://demo.com/api',{
                path: '/somedata'
            });
        }   
    }
}

但我在控制台中收到此错误“GET https://demo.com/somedata/?EIO=3&transport=polling&t=MnY8GnG 404(NOT FOUND)”

我怎样才能从这个url（如EIO）中删除其他参数，以便我可以获得API的正确数据。

我通过 for 循环动态创建了 5 个复选框

<v-checkbox 
    v-model="selectAll"
    label="Select All"
    @change="select_All($event)"
></v-checkbox>

<template v-for="n in 5">
    <v-checkbox 
       v-model="selected[n]"
    ></v-checkbox>
</template>

在脚本中

data(){
    return{
        selected:[],
                selectAll: false
    }
},
methods:{
    select_All(e){
        if(e == true)
        {
            // check all the checkbox
        } else {
            // uncheck all the checkbox
        }
    }
}

这就是我动态创建复选框的方式，（如果您对如何创建动态复选框有任何更好的建议，请告诉我）现在我首先有一个复选框，如果我单击（选中）该复选框，则应选择以下所有复选框或相反亦然。

我正在使用 vuetify 2.0 并且我面临一个问题，在我的 vuetify.js 文件中我有以下代码

export default new Vuetify({
    theme:{
        themes: {
            light: {
                primary: '#3f51b5',
                secondary: '#b0bec5',
                accent: '#8c9eff',
                error: '#b71c1c',
              }
        },
        dark: true
    }

})

vuetify 主题https://vuetifyjs.com/en/customization/theme

在这里，我默认为浅色主题设置了自定义颜色，但是当我将深色设置为 true 时，我为浅色设置的颜色会发生变化。为什么会发生这种情况，为什么我不能在黑暗模式下拥有自己的颜色？我们如何覆盖此功能或这是默认功能？

更新如下

export default new Vuetify({
    theme:{
        themes: {
            light: store.getters.selectedTheme.theme,
            dark: store.getters.selectedTheme.theme
        },
        // dark: true
    },

})

黑暗的真/假是我通过复选框设置，我在复选框上调用 onChange 的方法如下

emitDarkMode(e) {
        this.$vuetify.theme.dark = e;
      // this.$store.dispatch("darkModeHandler");
    },

主要的是，我有 5 种不同的主题颜色集，例如主要、次要等，并使用单选按钮设置这些主题颜色。就像如果我点击红色（错误），主题颜色将被设置为红色等等。并使用 vuex 完成所有这些。但是当我切换到暗模式时，我的主题颜色会更改为 vuetify 的默认颜色，并且我无法在暗模式下通过单选按钮动态更改主题颜色。

谢谢