v-model不能使用三元表达式也不能使用methods方法的解决办法

一、计算属性(适用于简单场景)

二、在data中定义一个对象，然后通过遍历循环获取(适用于复杂场景)

<template>
<ul>
  <li @dblclick="toggleAnnualControl(property)" v-for="(property, index) in propertyList" :key="index">{{
    getPropertyName(property)
  }}&nbsp;&nbsp;&nbsp;
    <span v-if="!getAnnualInputShow(property.keyType)" class="annual-goal">{{
      propertyInputs[property.keyType]
    }}</span>
    <el-input @blur="handleCloseAnnualInputBlur($event, property)"
      v-if="getAnnualInputShow(property.keyType)" type="text" v-model="propertyInputs[property.keyType]"
      v-clickoutside="handleCloseAnnualInputShow" />
  </li>
</ul>
</template>
<script>
export default{
    data(){
        return {
                  propertyList:[
                      {
                          content: null
                          id: 6
                          keyType: 0
                      },
                      {
                          content: null
                          id: 7
                          keyType: 1
                      },
                      {
                          content: null
                          id: 8
                          keyType: 2
                      },
                      {
                          content: null
                          id: 9
                          keyType: 3
                      },
                      {
                          content: null
                          id: 10
                          keyType: 4
                      }
                  ],
        
                  isAnnualInputShow: false,
                  isProjectInputShow: false,
                  isNearInputShow: false,
                  isUnitInputShow: false,
                  isPresentInputShow: false,

                  propertyInputs: {
                    0: this.isAnnualInput,
                    1: this.isProjectInput,
                    2: this.isNearInput,
                    3: this.isUnitInput,
                    4: this.isPresentInput
                  },

                  isAnnualInput: "",
                  isProjectInput: "",
                  isNearInput: "",
                  isUnitInput: "",
                  isPresentInput: "",
        }
    },
    methods:{
        getAnnualInputShow(val) {
          console.log('val', val);
          switch (val) {
            case 0:
              return this.isAnnualInputShow;
              break;
            case 1:
              return this.isProjectInputShow;
              break;
            case 2:
              return this.isNearInputShow;
              break;
            case 3:
              return this.isUnitInputShow;
              break;
            case 4:
              return this.isPresentInputShow;
              break;
          }
    },
    toggleAnnualControl(property) {
      console.log("双击了", property);

      switch (property.keyType) {
        case 0:
          this.isAnnualInputShow = !this.isAnnualInputShow;
          break;
        case 1:
          this.isProjectInputShow = !this.isProjectInputShow;
          break;
        case 2:
          this.isNearInputShow = !this.isNearInputShow;
          break;
        case 3:
          this.isUnitInputShow = !this.isUnitInputShow;
          break;
        case 4:
          this.isPresentInputShow = !this.isPresentInputShow;
          break;
      }
    },
    handleCloseAnnualInputBlur(e, property) {
      switch (property.keyType) {
        case 0:
          this.isAnnualInputShow = false;
          break;
        case 1:
          this.isProjectInputShow = false;
          break;
        case 2:
          this.isNearInputShow = false;
          break;
        case 3:
          this.isUnitInputShow = false;
          break;
        case 4:
          this.isPresentInputShow = false;
          break;
      }
    },
    getPropertyName(property) {
      switch (property.keyType) {
        case 0:
          return "年度目标：";
          break;
        case 1:
          return "近期目标：";
          break;
        case 2:
          return "项目类型：";
          break;
        case 3:
          return "客户单位：";
          break;
        case 4:
          return "客户代表：";
          break;
      }
  },
 
    }
}
</script>

参考链接1：
blog.csdn.net/m0_72663698…

参考链接2：
www.cnblogs.com/pengycAir/p…