v-for遍歷數組使用v-if或者v-show動態顯示某個組件

我是在antdv的a-list中間使用的，類似與一個v-for

 <a-list
          item-layout="vertical"
          size="large"
          :pagination="pagination"
          :data-source="listData"
          :locale="{ emptyText: '暫無回答' }"
          :loading="loading"
        >
          <div slot="header">
            <b>{{ listData.length }}</b> 個回答
          </div>
          <a-list-item
            slot="renderItem"
            key="item.title"
            slot-scope="item, index"
          >
            <a-list-item-meta :description="item.description">
              <a slot="title" :href="item.href">{{ item.username }}</a>
              <a-avatar slot="avatar" :src="item.avatar" />
            </a-list-item-meta>
            {{ item.reply }}
            <a-row>
              <a-col :span="4">
                <a href="javascript:;">
                  <span @click="star(item.id)">
                    <a-icon type="star" style="margin-right: 8px" />{{
                      item.star
                    }}
                  </span>
                </a>
              </a-col>
              <a-col :span="4">
                <span @click="show(index)">
                  <a-icon type="message" style="margin-right: 8px" />{{
                    item.comments
                  }}
                </span>
              </a-col>
            </a-row>
            <div v-show="show_comments[index]">
            <a-textarea ></a-textarea>

            </div>
          </a-list-item>
        </a-list>

a-textera和show_comments中的bool值進行一一綁定
這裏一定要使用this.$set或者Vue.set方法，否則無法生效

show(index) {
      this.$set(this.show_comments, index, true)  // 需要使用set方式才能生效，直接賦值無法生效
    },

效果