tabs切换（v-for)，填写内容

实现效果

---

问题描述：

因为我是通过v-html方法实现的填空题，现在需要将用户历史提交的答案查出来，并动态渲染上页面，但是开始不知道如何去实现。

尝试方法

created/mounted

我是想在页面渲染完成，便自动调用方法，但是失败了，根本就没有调用到这个方法，甚至我都看不到打印信息和报错

原因猜测

因为tabs组件其实在进入开始的时候就已经进入到了created钩子函数中，但是因为我们项目是通过v-for和v-if进行对显示组件的渲染，也就是说 在一开始就已经错过了时间

[Vue生命周期图示]# 实现效果

ref/$refs

之后，我继续寻找解决办法。意识到ojTopicSetList与ojTopicBlank是子父组件的关系，所以想要实现 父组件中调用子组件方法（ref / $refs)

如果没有使用到v-for这个方法应该是挺好的（但是目前我暂时没有用过），因为这样可以调用到 子组件 的所有方法

按道理，这种想法是很好的，但是却居然出现了报错

最后才知道原来，v-for与$refs他们之间是有冲突的

参考链接

解决办法

1.子组件从父组件拿值

props: [  'preBlankAnswer' ],

2.父组件响应

<template>
  <div>
    <div>
        
      <el-tabs v-model="activeName">
          <oj-topic-blank
            v-if="item.topicTypeId === 4"
            :topicList="topicList"
            :qtopicsetId="qtopicsetId"
            :eachBlankNum="eachBlankNum"
            :showValue="endState"
            :preBlankAnswer="preBlankAnswer"
          ></oj-topic-blank>
        </el-tab-pane>
      </el-tabs>
      
    </div>
    
  </div>
</template>

<script>

import api from 'api'

import OjTopicBlank from '../comMakeQuestion/ojTopicBlank.vue'


export default {
  components: {
    OjTopicBlank,
  },
  data() {
    return {
      activeName: 0,
      str: "<input class='testBlank' name='testBlank' type='text' style='height:28px' >",
      preBlankAnswer: [],
    }
  },
  watch: {
    activeName: function (val) {
      this.showAnswerList();
    },
  },
  methods: {
  	 async showAnswerList(topicTypeId) {
      const data = await api.userObjectAnswer.userObjectAnswer({
        topicSetId: this.$route.query.topicSetId,
        topicTypeId: topicTypeId,
        accountId: window.localStorage.getItem('accountId'),
      })

      console.log('我先想看看这个长啥样', data)
      
       this.preBlankAnswer = data.data

  }
  
</script>

3.检测preBlankAnswer变化，调用函数

之前，我其实有想过，但是开始却因为用错方法了，然后才放弃的

 watch:{
    preBlankAnswer:function(){
      this.queryPreAnswer();
    }
  },

watch使用格式：

watch:{
	变量名:function(){
		调用的函数体/名字
	}
}

4.整体函数

queryPreAnswer(){
      console.log("得得得得得~~传过来了没？",this.preBlankAnswer);
      var test = $('.allBlank .testBlank')
      let cnt = 0 ;
      for(let i = 0 ; i < this.preBlankAnswer.length ; i++ ){
        for(let j = 0 ; j < this.preBlankAnswer[i].topicAnswer.length ; j ++){
          test[cnt ++ ].value = this.preBlankAnswer[i].topicAnswer[j].answer;
        }
      }

    },

关键代码解释：

1.获取当前的 输入框的 DOM元素结点

var test = $('.allBlank .testBlank')

其他的详情可见 获取填空题值

外层div 设置class为allBlank，输入框的class 设置成testBlank

这里用到了jQuery 相关安装教程 导入jquery库

如果存在疑问可以打印出来

打印debug是一个非常重要的思想！！！

console.log("来吧，看看这个test长啥样",test);

2.将各个题目填上答案

①外层循环为 i从0~最外层数组长度

for(let i = 0 ; i < this.preBlankAnswer.length ; i++ ){
     
 }

②内层循环为 j 从0~每个题的答案

for(let j = 0 ; j < this.preBlankAnswer[i].topicAnswer.length ; j ++){

③cnt ++ 赋值

test[cnt ++ ].value = this.preBlankAnswer[i].topicAnswer[j].answer;

这里之所以可以这么做，因为 js是动态语言！！

当前test为数组，可以对每一个位置进行操作