uniapp中标签回显业务逻辑

Question

需求
用户点击编辑图标会到编辑页面,带过去的内容有 手机号和姓名 以及标签(这里标签是个id)
联系人和电话我知道如何回显 但是标签不会了,会的大哥帮忙看看了,谢谢

一下是主要代码`<template>
<view class="addLiaison-box">

<view class="addLiaison-content">
  <view class="content-box">
    <u-form :model="form" ref="uForm">
      <u-form-item label="联系人" label-width="auto" prop="name">
        <u-input v-model="form.name" placeholder="请填写联系人姓名" />
      </u-form-item>
      <u-form-item label="联系电话" label-width="auto" prop="telPhone">
        <u-input v-model="form.telPhone" placeholder="请填写联系电话" />
      </u-form-item>
    </u-form>
      <view class="content-tag">
        设置标签
      </view>
      <view class="content-text">
       <u-tag class="tags-text" :text="item.dictName" v-for='(item,dictValue) in dataType' :key='dictValue'
        :type="item.type" mode="plain" show="true" @click="tagClick(item)" />
      </view>
  </view>
</view>
<view class="addLiaison-button">
  <u-modal v-model="show" 
  show-cancel-button="isCancel"
  cancel-text="取消"
  :content="content" 
  :show-title=isTitle
   @confirm="confirm"
   @cancel="cancel"
   ></u-modal>
   <u-button  @click="conserve" size="medium" type="primary" shape="circle" >保存并使用</u-button>
   <u-button  @click="delLiaison" size="medium" type="error" shape="circle" >删除</u-button>

</view>
</view>
</template>

<script>

import { mapActions } from 'vuex';

export default {
data() {

return {
    form: {
      name: '',
      telPhone: '',
    },
    show:false,
    isTitle:false,
    isCancel:true,
    content:'确定要删除联系人吗',
    dataType: [],
    // 联系信息
    liaisonData:{},
    // 选中的联系人标签
    drugRelation:'',
    rules:{
      name:[
        {required: true,message: '请输入联系人姓名',trigger: ['change','blur']},
      ],
       telPhone:[
        {required: true,message: '请输入联系人电话',trigger: ['change','blur']},
        {validator: (rule, value, callback) => {
          return this.$u.test.mobile(value);
          },
          message: '联系人电话不正确',
          trigger: ['change','blur'],
        }
      ]
    }
    }
},

onLoad (option) {

  // 接收到用户选中的数据
    console.log('items',option)
    this.liaisonData = option
    this.form = {...option}
    this.drugRelation = option.drugRelation
    // if(option.drugRelation )
    // this.dataType = option
    // this.dataType.find(item=>item===option.drugRelation)
    // this.dataType.forEach(item=>{
    //     console.log("111111",item)
    //     item.type = 'primary'
    //     if(item.drugRelation===option.drugRelation){
    //         item.type = 'primary'
    //     }
    // })

},
onReady() {
      this.$refs.uForm.setRules(this.rules);
  },
methods:{
...mapActions(['ActLiaisonTag','ActUpdateMemberUser','ActDeleteMemberUser']),
  tagClick(item){
      // 用户点击的时候通过改变type的值来显示
     this.dataType.forEach(element => {
       element.type = 'info'
     });
    item.type = 'primary'
    this.drugRelation = item.dictValue
  },
  // 保存
  conserve(){
    this.$refs.uForm.validate(async(valid) => {
      if(!valid){
        return
      }else{
        if(!this.drugRelation){
          this.$refs.uToast.show({
            title: '请选择标签',
          })
        }else{
          const formData = {
            name:this.form.name,
            telPhone:this.form.telPhone,
            drugRelation:this.drugRelation,
            id:this.liaisonData.id
          }
          this.ActUpdateMemberUser(formData)
          this.$u.route({
            url:'pages/person/liaison',
            type:'redirect'
          })
        }
      }
    })
  },
  delLiaison(){
    this.show = true
  },
  cancel(){
    this.show = false
  },
  confirm(){
    this.ActDeleteMemberUser({id:this.liaisonData.id})
    this.$u.route({
      url:'pages/person/liaison',
      type:'redirect'
    })
  },
  async getTag(){
   const {code,data} = await this.ActLiaisonTag()
   if(code === 200 ){
     this.dataType = data.map(item=>{
      this.$set(item,'type','info')
      return item
     })
  }
  },
},
mounted () {
  this.getTag()
}

}
</script>

<style lang="scss" scoped>
page {

height: 100%;
background-color: #f6f6f6;

}
.addLiaison-box{
margin: 0 24rpx;
.addLiaison-content{

padding: 0 24rpx;
border-radius: 16rpx;
background-color:#FFF;
margin-top: 24rpx;
.content-box{
  u-form-item{
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }
  .content-tag{
    padding-top: 28rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
  }
  .content-text{
    padding: 32rpx 0 32rpx;
    .tags-text{
      margin: 12rpx;
    }
  }
}

}
.addLiaison-button{

padding-top: 48rpx;
u-button{
  margin: 0 24rpx;
}

}
}
</style>~~~~`

Answer 1

:class=['传递过来的tagid'==item.id?'active':'' ]
这里的active 作为一个凸显tag的css