vue warn fix

src/App.vue

@@ -12,10 +12,12 @@ import 'vue-material/dist/vue-material.min.css'
 import MdTabs from "vue-material/dist/components/MdTabs";
 import MdIcon from "vue-material/dist/components/MdIcon";
 import MdCard from "vue-material/dist/components/MdCard";
+import MdDialog from "vue-material/dist/components/MdDialog";
 
 Vue.use(MdTabs);
 Vue.use(MdIcon);
-Vue.use(MdCard)
+Vue.use(MdCard);
+Vue.use(MdDialog);
 
 import TabsMenu from "@/components/TabsMenu.vue";
 export default {

src/components/TabsMenuElements/RulesView/RulesView.vue

@@ -17,10 +17,10 @@
           <div class="md-layout-item md-size-100 md-alignment-bottom-center">
             <div class="md-layout md-alignment-bottom-center md-gutter">
               <div class="md-layout-item md-size-5"/>
-              <RuleCard v-for="item in this.rules[0]" :key="item" :img_src="item['image']" :box_in_item="true" :md_size="30" :title_text="item['name']" :main_text="item['about']"/>
+              <RuleCard v-for="item in this.rules[0]" :key="item['name']" :img_src="item['image']" :box_in_item="true" :md_size="30" :title_text="item['name']" :main_text="item['about']"/>
               <div class="md-layout-item md-size-5"/>
               <div class="md-layout-item md-size-5"/>
-              <RuleCard v-for="item in this.rules[1]" :key="item" :img_src="item['image']" :box_in_item="true" :md_size="30" :title_text="item['name']" :main_text="item['about']"/>
+              <RuleCard v-for="item in this.rules[1]" :key="item['name']" :img_src="item['image']" :box_in_item="true" :md_size="30" :title_text="item['name']" :main_text="item['about']"/>
               <div class="md-layout-item md-size-5"/>
             </div>
           </div>

src/components/TabsMenuElements/ServersView/ServerCard.vue → src/components/TabsMenuElements/ServersView/Components/ServerCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="md-layout-item md-size-100" style="padding-bottom: 1%">
-    <md-card st>
+    <md-card v-on:click="openServerFullInfo()">
       <md-card-media-cover md-solid>
         <md-card-media class="card-size" md-ratio="16:9">
           <img :src="serverImage" :alt="serverName" crossorigin="anonymous">
@@ -14,12 +14,16 @@
         </md-card-area>
       </md-card-media-cover>
     </md-card>
+    <ServerFullInfo :server-data="serverData" ref="ssd"/>
   </div>
 </template>
 
 <script>
+import ServerFullInfo from "@/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue";
+
 export default {
   name: 'ServerCard',
+  components: {ServerFullInfo},
   props: {
     serverImage: String,
     serverName: String,
@@ -29,6 +33,14 @@ export default {
       type: Object,
       default: null
     }
+  },
+  data: () => ({
+    serverFullInfoOpened: false
+  }),
+  methods: {
+    openServerFullInfo() {
+      this.$refs.ssd.openDialog();
+    }
   }
 }
 </script>

src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <md-dialog :md-active.sync="showServerDialog">
+      <md-dialog-title>Preferences</md-dialog-title>
+
+      <md-tabs md-dynamic-height>
+        <md-tab md-label="General">
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
+        </md-tab>
+
+        <md-tab md-label="Activity">
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
+        </md-tab>
+
+        <md-tab md-label="Account">
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
+        </md-tab>
+      </md-tabs>
+
+      <md-dialog-actions>
+        <md-button class="md-primary" @click="showServerDialog = false">Close</md-button>
+        <md-button class="md-primary" @click="showServerDialog = false">Save</md-button>
+      </md-dialog-actions>
+    </md-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ServerFullInfo",
+  props: {
+    serverData: Object,
+  },
+  data: () => ({
+    showServerDialog: false
+  }),
+  methods: {
+    openDialog() {
+      this.showServerDialog = true;
+    }
+  }
+}
+</script>

src/components/TabsMenuElements/ServersView/ServersView.vue

@@ -13,11 +13,11 @@
         <h4 style="text-align: center">Для подключения к серверу нажми на него</h4>
         <hr>
         <h5 style="text-align: center" v-if="servers['w'].length>0">где сейчас играют карлики</h5>
-        <ServerCard v-for="srv in servers.w" :key="srv" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
+        <ServerCard v-for="srv in servers['w']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
         <h5 style="text-align: center" v-if="servers['e'].length>0">где сейчас никого нет</h5>
-        <ServerCard v-for="srv in servers.e" :key="srv" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
+        <ServerCard v-for="srv in servers['e']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
         <h5 style="text-align: center" v-if="servers['n'].length>0">где сейчас играют карлики</h5>
-        <ServerCard v-for="srv in servers.n" :key="srv" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
+        <ServerCard v-for="srv in servers['n']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv"/>
       </div>
     </div>
   </md-tab>
@@ -26,12 +26,12 @@
 <script>
 import CharacterImage from "@/components/Others/CharacterImage.vue";
 import PublicMethods from "@/components/PublicMethods";
-import ServerCard from "@/components/TabsMenuElements/ServersView/ServerCard.vue";
+import ServerCard from "@/components/TabsMenuElements/ServersView/Components/ServerCard.vue";
 export default {
   name: 'ServersView',
   components: {ServerCard, CharacterImage},
   data:() => ({
-    servers: null
+    servers: {'w':[], 'n':[], 'e':[]}
   }),
   async created() {
     this.servers = await PublicMethods.getServers();