【Vue易混点】

Ant Design of vue

1、Vue的标签属性label中字符串拼接变量

<el-form-item :label="`参数${(index + 1)}类型`" v-for="(item, index,) in props.row.params">
  <span v-text="item"></span>
</el-form-item>

2、a-select组件 v-for 报错—是否带：

加冒号,说明属性后是一个变量或表达式 是v-bind的缩写,绑定一个变量( 组件自定义属性 ); 没加冒号,后面就是对应的字符串字面量 (组件自带的属性);
在工作中使用a-select组件，对其用v-for事件，官网基本用法如下

<template>
  <div>
    <a-select default-value="lucy" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="disabled" disabled>
        Disabled
      </a-select-option>
      <a-select-option value="Yiminghe">
        yiminghe
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>

效果图：
需求：变量存储所有的option，用v-for训话渲染
value用官网的用法不带: ,导致报错Duplicate keys detected: ‘item.key’. This may cause an update error ，纠正：加上冒号，使其引用v-for中定义的元素

//法1  元素是对象的数组[{}]
const selelct_visits = [{ key: 'visits_asc', value: '访问次数升序' },
  { key: 'visits_desc', value: '访问次数降序' }]
  
<a-select default-value="visits_asc" style="width: 300px" @change="handleChange">
            <a-select-option v-for="(item, index) in selelct_visits"
              :key="index"
              :value="item.key">{{item.value}}
            </a-select-option>
</a-select>

//法2  对象{}
const selelct_UpdateTime = {
  dafaultValue: '更新时间升序', //  updatetime_asc
  updatetime_desc: '更新时间降序'
}

<a-select default-value="dafaultValue" style="width: 300px" @change="handleChange">
            <a-select-option v-for="(value,key) in selelct_UpdateTime"
              :key="key"
              :value="key">{{value}}
            </a-select-option>
          </a-select>

//法3 元素是字符串的数组['english','math','chinese']
<a-select
     style="width: 100%"
     placeholder="请选择开班课程"
     v-decorator="['courseType', validatorRules.courseType]">
     <a-select-option value="">请选择开班课程</a-select-option>
     <a-select-option v-for="(course, index) in courseList" :key="index.toString()" :value="courseTypeList[index]" >
          {{ course }}
     </a-select-option>
</a-select>

3、父子组件传值，避免直接修改props属性的值，通过子组件watch监听

错误操作–直接修改props（如：this.showDeleter = true）
报错信息：Avoid mutating a prop directly since the value will be overwritten whenever the parent
**注意：**两种都需要 监听（watch） props值变化 （即 父组件修改了props值，子组件监听到props值变化，并随之改变）
解法1：在data中定义变量fileName ，组件中使用fileName 接收props父组件传的值this.data.name
解法2：watch中接收父组件传值v 用接收值覆盖props(this.showDeleter = v)
父组件addMediaModal.vue 部分代码如下

<div v-if="fileItemObj && fileItemObj.uid">
            <file-item :data="fileItemObj" @delete="deleteFile" @preview="previewFile" @download="downloadFile"
              :showDelete="showHandle"></file-item>
          </div>
          
import FileItem from './fileItem.vue'

子组件 fileItem.vue 部分代码

<template>
  <a-tooltip :visible="showError"  :title="errMessage">
    <ul class="file-item-container" @mouseover="triggerTooltip" @mouseleave="hiddenTooltip" :style="borderStylesheet">
      <li class="thumbnail-container">
        <img class="thumbnail-img" :src="data.thumbUrl" alt="缩略图">
        <div class="preview-layer" v-if="options.preview" @click="previewFile">
          <a-icon class="preview-icon" type="eye" />
        </div>
      </li>
      <li class="info-container">
        <div class="file-name" @click="downloadFile" :title="data.name">{{data.name}}</div>
        <div class="upload-progress" v-show="data.status === 'uploading'">
          <span class="progress-result" :style="progressLen"></span>
        </div>
      </li>
      <li class="handle-container" @click="deleteFile" v-if="showDelete">
        <a-icon title="删除" class="handle-icon" v-if="options.delete" type="delete"/>
      </li>
    </ul>
  </a-tooltip>
</template>

<script>
export default {
  components: {},
  props: {
    // 文件显示的要素
    data: {
      type: Object,
      required: true,
      validator: function(value) {
        return (
          value.hasOwnProperty('uid') &&
          value.hasOwnProperty('name') &&
          value.hasOwnProperty('url') &&
          value.hasOwnProperty('status') &&
          value.hasOwnProperty('thumbUrl')
        )
      }
    },
    // 是否可删除
    showDelete: {
      type: Boolean,
      default: false
    },
    // 权限配置
    options: {
      type: Object,
      default: () => ({
        delete: true,
        preview: true,
        download: true
      })
    }
  },

  watch: {
    // 进度条的监听
    'data.status'(status) {
      if (status === 'uploading') {
        this.showProgress = true
      } else {
        this.$nextTick(() => {
          this.showProgress = false
        })
      }
    },
    // group() {
    //   this.groupId = this.group.id
    // },
    data() {
      this.fileName = this.data.name
    },
    // 监听props 父组件传的值
    showDelete(v) {
      this.showDelete = v
    }

  },

  data() {
    return {
      showProgress: false,
      errMessage: '上传失败',
      showError: false,
      // showGroupCorrection: false,
      // groupId: this.group.id,
      fileName: this.data.name
    }
  }
}
</script>