cannot use “in“ operator to search “ for “$index“ in false

出现场景： 渲染table组件时出现,

出现原因: 在table组件中使用elementUI中的el-popoer组件

                 其中,el-popoer组件使用时如下代码

       <div>
         <template slot-scope="scope">
              <el-popoer
                placement="left-end"
                trigger="manual"
                v-model="tableIndex==scope.$index&&list&&list.length>0"
                :visible-arrow="false"
                >
                <--:loading="scope.row.visable"  
              elementUi中按钮的loading事件,让用户体验好一点,
             主要的我popoer的内容加载的数据有点慢 看情况而定--> 
              <div>掉接口请求出来的数据</div>
                <div><el-button 
                slot="reference"
                ref="popoerBtn" 
               :loading="scope.row.visable"  
                @click="handle(scope.row,scope.$index)"></el-button></div>
              </el-popoer>
         </template>
      </div>
         <script>
           export default {
    data () {
            return {
                list:[],
                tableIndex:-1,
                tableList:[],
                changeIndex:-1,
            }
        },
     methods:{
        // 这里是加载table的列表的数据
       getTableList(){
        //   掉接口
        // 数据
        // 返回值
        // this.tableList
        const res =await xxxx()
           if(res.code==200){
            // this.tableList=res.data
            // 在table组件中操作时弹出popover提示，通过数据渲染时，
            //会渲染出多个popover,所以当点击按钮展示popover。弹出后再次点击隐藏。
            // 所以再铺table页面时 对象多添一个字段 用于点击按钮是加载数据缓慢
           this.tableList=res.data.map(item=>{
            item.visable=false
            return item 
           })
           }else{
            // 警告提示
           }
       },
       async handle(row,i){
        //   掉接口
        // 数据
        // 返回值
        // this.list
        if(this.changeIndex==i){
            // 再次点击隐藏
            this.list=[]
            this.changeIndex=-1
            this.tableIndex=-1
            row.visable=false
        }else{
            this.changeIndex=i
            this.tableIndex=i
            this.list=[]
             row.visable=true //按钮的加载
             const res =await xxxx()
           if(res.code==200){
            this.list=res.data
           }else{
            // 警告提示
           }
            row.visable=false //加载完成
        }
       
        }
     }
}
</script>

因为业务需要判断，然后v-model里面加了个三元运算导致报错

后来 又看了element组件看到 v-model 和value是同类型使用, OK换成了value就不会报标题的错了

             <el-popoer
                placement="left-end"
                trigger="manual"
                :value="tableIndex==scope.$index&&list&&list.length>0"
                :visible-arrow="false"
                >

 在这过程中还试过计算属性,但都不行,v-model里不能使用计算属性,希望能给你们帮助,记录一下.