V-если внутри V-для, чтобы показать один раздел

Question

Я пытаюсь сделать что-то наподобие комментариев к комментарию, хотя на странице отображается несколько сообщений, если вы нажмете «показать комментарии» для этого сообщения, будут показаны только комментарии к сообщениям.

Мое решение: сделать 162 логических переменных в create (), а затем использовать индекс из v-для плохой записи моего v-if, но это не откроет div, который я хочу. Я должен упомянуть в create (), когда я перевожу переменные к истине они все открываются. мы показываем только 162 сообщения!

когда значение false, после нажатия их значение меняется на true (проверяется с помощью console.log), но div не открывается!

<template>
  <span v-if="post.comments_status == 1" class="optiontext cursor-pointer" @click="showcomment(index)"><i
            class="fa fa-comment-o"></i> OPEN COMMENT SECTION FOR THIS POST 
  </span>

<div class="col-md-8" id="imtop" style="direction:rtl">

    <!-- v-if part to show comments-->
    <div v-if="Commenton[index] == true" class="col-md-12 commentsec">
        <div class="eachcomment col-md-12">
            <div class="usercomment">
                <img :src="images" class="pop-img-min"/>
            </div><!-- usercomment end-->
        </div>

    </div><!-- end of allposts-->
</div>
</template>

<script>
  import vSelect from 'vue-select'
  import axios from 'axios'
  export default {

  components: {vSelect},
  props: ['alltags','posts'],
  data() {
    return {
      searchoptions:[{label:'جدیدترین ',value:'newest'},{label:'محبوبترین',value:'محبوبترین'}],
      Commenton:[],
    }
  },

  created() {
    for(var i = 0; i<162;i++) {
      this.Commenton[i] = false;
    }

  },
  mounted() {
    this.getInitialUsers();
    this.scroll(this.post);
  },
  methods: {
    showcomment(indexof){
      if(this.Commenton[indexof] == false){
        this.Commenton[indexof]=true;
      }else if(this.Commenton == true) {
        this.Commenton=false;
      }
    },

  },

}


</script>

Примечание : это одностраничное веб-приложение с более чем 1000 строками кода, пришлось удалить много частей, чтобы вы могли увидеть дополнительные теги div или что-то в этом роде, но программа работает правильно.

Мой бэкэнд - laravel, но я не думаю, что это как-то связано с этим!

Спасибо за помощь

Answer 1

У вас проблемы с реактивностью.

Эти проблемы вызваны тем, что vue не может обнаружить модификации массива из-за ограничений в среде Javascript. Чтобы убедиться, что vue видит ваши изменения, используйте this.$set(object, key, value):

// Inside your created method:
this.$set(this.Commenton, i, false);

// inside you showComment method
    showcomment(indexof){

        if(this.Commenton[indexof] == false){
            this.$set(this.Commenton, indexof, true);
        }else if(this.Commenton[indexof] == true) {
            this.$set(this.Commenton, indexof, false);
        }


   },