V-если внутри v-для отображения одного раздела
Я пытаюсь сделать что-то вроде комментариев в LinkedIn, в то время как на странице отображается несколько сообщений, если вы нажмете «показать комментарии» для этого сообщения, будут показаны только комментарии к сообщениям.
мое решение: создание 162 логических переменных в created (), а затем использование индекса из v-for ill, напишите мой v-if, но он не откроет div, который я хочу. необходимо упомянуть в created (), когда я выравниваю переменные до true, они все открываются. мы показываем только 162 сообщения!
когда его значение false, после щелчка их значение изменяется на true (проверено с помощью console.info), но 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, но я не думаю, что это имеет к этому какое-то отношение!
Спасибо за любую помощь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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);
}
},
Как насчет того, чтобы создать переменную с именем selectedPostId, а затем проверять comment.postid === selectedPostId || selectedPostId === undefined при зацикливании, вот как я бы ее закодировал
один быстрый вопрос! есть ли лучший способ, чем сделать массив 162? сценария тоже хватит. Кстати, спасибо за чистый ответ!