CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Pc Monk
Pc Monk

Reputation: 85

v-if inside a v-for to show one section

Im trying to do something like linkedin comments , while there are multiple post shown on the page , if u click on "show comments" for that post , only that posts comments will be shown.

my solution :making 162 boolean variables in created() and then using index from v-for ill write my v-if but it wont open up the div i want.have to mention in created() when i euqal the variables to true they all get open. we only show 162 posts!

when its false,after clicking their value changes to true (checked it with console.log) but the div wont get open!

<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>

Note : its a single page webapp with over 1000 lines of code , had to remove lots of part so you might see additional div tags or something , but the program is working correctly.

My backend is laravel but i dont think it has anything to do with that!

Thanks for anyhelp

Upvotes: 0

Views: 114

Answers (1)

Ferrybig
Ferrybig

Reputation: 18834

You are having reactivity problems.

These issues are caused by the fact that vue cannot detect array modifications because of limitations in the Javascript environment. To make sure vue sees you changes, use 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);
        }


   },

Upvotes: 2

Related Questions