优化tag-input插件

src/components/TagInput/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tag-input">
-    <div v-for="(tag, index) in tags" :key="tag" class="tag-input__tag">
+    <div v-for="(tag, index) in initTags" :key="tag" class="tag-input__tag">
       <span @click="removeTag(index)">x</span>
       {{ tag }}
     </div>
@@ -17,38 +17,36 @@ import { Component, Vue } from 'vue-property-decorator'
 
 declare module 'vue/types/vue' {
   interface Vue {
-    tagStr?: string
+    initTags?: string[]
   }
 }
 
 @Component({
   name: 'TagInput',
-  props: ['initTags', 'placeholder']
+  props: ['initTags', 'placeholder'],
+  model: {
+    prop: 'initTags',
+    event: 'update'
+  }
 })
 
 export default class extends Vue {
-  private tags: string[] = []
-
-  mounted() {
-    console.log(this.tagStr)
-    if (this.tagStr) {
-      this.tags = this.tagStr.split(',')
-    }
-  }
 
   private addTag(event: any) {
     event.preventDefault()
     const val: string = event.target.value.trim()
     if (val.length > 0) {
-      this.tags.push(val)
+      this.initTags.push(val)
       event.target.value = ''
-      this.$emit('tag-change', this.tags.join(','))
+      this.$emit('update', this.initTags)
+      this.$emit('tag-change', this.initTags)
     }
   }
 
   private removeTag(index: number) {
-    this.tags.splice(index, 1)
+    this.initTags.splice(index, 1)
-    this.$emit('tag-change', this.tags.join(','))
+    this.$emit('update', this.initTags)
+    this.$emit('tag-change', this.initTags)
   }
 }
 </script>

src/views/system/role.vue

@@ -92,7 +92,7 @@
         <el-form-item label="权限">
           <tag-input
               placeholder="输入权限"
-              :tag-str="role.pstr"
+              v-model = "role.permissions"
               v-on:tag-change="tagChange"
           />
         </el-form-item>
@@ -166,9 +166,9 @@ export default class extends Vue {
     this.getRoles()
   }
 
-  private tagChange(val: string) {
+  private tagChange(vals: string[]) {
-    console.log('tag change: ', val)
+    console.log('tag change: ', vals)
-    this.role.pstr = val
+    this.role.pstr = this.role.permissions.join(',')
   }
 
   private async getRoles() {