state

components/page/state.vue

 <template>
-<div class="ib">
-
-  <div  class="ib" v-if="!isMore">
-    <span v-if="type=='text'" :style="style">{{name}}</span>
-    <Tag v-if="type=='tag'" :color="tagcolor">{{name}}</Tag>
-    <Badge v-if="type=='dot'" :color="tagcolor" :text="name" />
-    <Icon v-if="type=='icon'" :type="item.icon" :color="tagcolor"  :title="name" size="24" />
+  <div class="ib">
+    <div class="ib" v-if="!isMore">
+      <span v-if="type=='text'" :style="style">{{name}}</span>
+      <Tag v-if="type=='tag'" :color="tagcolor">{{name}}</Tag>
+      <Badge v-if="type=='dot'" :color="tagcolor" :text="name" />
+      <Icon v-if="type=='icon'" :type="item.icon" :color="tagcolor" :title="name" size="24" />
+    </div>
+    <div class="ib" v-else v-for="(li,i) in items" :key="i">
+      <span v-if="type=='text'" :style="li.style">{{li.name}}</span>
+      <Tag v-if="type=='tag'" :color="li.tagcolor">{{li.name}}</Tag>
+      <Badge v-if="type=='dot'" :color="li.tagcolor" :text="li.name" />&nbsp;
+    </div>
   </div>
-  <div  class="ib" v-else v-for="(li,i) in items" :key="i">
-    <span v-if="type=='text'" :style="li.style">{{li.name}}</span>
-    <Tag v-if="type=='tag'" :color="li.tagcolor">{{li.name}}</Tag>
-    <Badge v-if="type=='dot'" :color="li.tagcolor" :text="li.name" />
-    &nbsp;
-  </div>
-</div>
-
 </template>
 <script>
 export default {
-  name: 'state',
+  name: "state",
   data() {
     return {
-      name: '',
-      isMore:false,
+      name: "",
+      isMore: false,
       item: {},
       items: [],
       data: []
-    }
+    };
   },
   props: {
     default: {
       type: String,
-      default: ''
+      default: ""
     },
     type: {
       type: String,
-      default: 'text',
+      default: "text",
       validator: function(value) {
-        return ['text', 'tag', 'dot','icon'].indexOf(value) != -1
+        return ["text", "tag", "dot", "icon"].indexOf(value) != -1;
       }
     },
     code: {
@@ -62,35 +59,39 @@ export default {
     }
   },
   created() {
-    this.data = this.$store.getters.dictionaryByKey(this.code) || []
+    this.data = this.$store.getters.dictionaryByKey(this.code) || [];
   },
   methods: {
     setName(v) {
-      if ((v+"").indexOf(',')==-1) {
-        var item
-        this.data.map((u) => {
+      if ((v + "").indexOf(",") == -1) {
+        var item;
+        this.data.map(u => {
           if (u.code == v) {
-            item = u
+            item = u;
           }
-        })
+        });
         if (item) {
-          this.name = item.name
-          this.item = item
+          this.name = item.name;
+          this.item = item;
         } else {
-          this.name = this.value
+          if (this.value == "undefined") {
+            this.name = ' '
+          } else {
+            this.name = this.value;
+          }
         }
       } else {
-        this.isMore=true;
-        var items=[];
-        var ul=(v+"").split(',')
-        this.data.map((u) => {
-          if (ul.indexOf(u.code)>-1) {
-            u.tagcolor=u.color|'default'
-            u.style={color: u.color|'inherit'}
-            items.push(u)
+        this.isMore = true;
+        var items = [];
+        var ul = (v + "").split(",");
+        this.data.map(u => {
+          if (ul.indexOf(u.code) > -1) {
+            u.tagcolor = u.color | "default";
+            u.style = { color: u.color | "inherit" };
+            items.push(u);
           }
-        })
-        this.items=items;       
+        });
+        this.items = items;
       }
     }
   },
@@ -99,36 +100,36 @@ export default {
       if (
         this.color &&
         this.item &&
-        this.item.color != '' &&
+        this.item.color != "" &&
         this.item.color != null
       ) {
-        return this.item.color
+        return this.item.color;
       }
-      return 'default'
+      return "default";
     },
     style() {
       if (!this.color) {
-        return {}
+        return {};
       }
       return {
         color:
-          this.item && this.item.color != '' && this.item.color != null
+          this.item && this.item.color != "" && this.item.color != null
             ? this.item.color
-            : 'inherit'
-      }
+            : "inherit"
+      };
     }
   },
   watch: {
     value(v) {
-      this.setName(v)
-        // this.$forceUpdate()
+      this.setName(v);
+      // this.$forceUpdate()
     },
-    data(v){
-      if(v.length>0){
-        this.setName(this.value)
-          this.$forceUpdate()
+    data(v) {
+      if (v.length > 0) {
+        this.setName(this.value);
+        this.$forceUpdate();
       }
     }
   }
-}
+};
 </script>
\ No newline at end of file