Vue.JS v-for循环后，想要实现每个单独项实现单独的show的true\false

Posted 2023-04-16

问题是 showGallery 属性默认为false，但是循环后，所有的都是false， 如果点击某一个gallery， 所有的showgallery 都变成了ture， 所以只会显示最上层的那个galler（别的被覆盖在底层）。
这里需要吧每个循环项，单独设置ture or false，相互之间不影响，应该怎么操作呢？

项目是， 循环项目里，会循环 一个图片 和一个组件， 点击对应的图片回弹出对应的gallery组件。在点击回隐藏组件。

<div v-for="item of list"
:key="item.id">

<div class="item">
<img class="item-img " :src="item.imgUrl" @click="handleGalleryClick($index)">
</div>

<CommonGallery
:imgs="item.screenshots"
v-show="showGallery"
@close="handleGalleryClose"></CommonGallery>
</div>
</div>
</template>

<script>
import CommonGallery from "./../../../common/gallery/Gallery";

export default
name: "ProjectList",
components:
CommonGallery
,
props:
list: Array
,
data()
return
showGallery: false
;
,
methods:

handleGalleryClick()
this.showGallery= true;
,
handleGalleryClose()
this.showGallery = false;


;
</script>

把showGallery维护成一个数组就能实现了

<img class="item-img " :src="item.imgUrl" @click="handleGalleryClick(item.id)">

<CommonGallery
    :imgs="item.screenshots"
    v-show="showGallery.includes(item.id)"
    @close="handleGalleryClose(item.id)">
</CommonGallery>

data() 
  return 
    showGallery: [],
  ;
,
methods: 
  handleGalleryClick(id) 
    this.showGallery.push(id);
  ,
  handleGalleryClose(id) 
    const index = this.showGallery.indexOf(id);
    this.showGallery.splice(index, 1);
  ,

追问

谢谢，目前打开各项可以，但是close这个回报错，没法关闭。
TypeError: this.showGallery.indexof is not a function

参考技术A 你这是一个由对象组成的数组，你应该给每个对象加一个show的属性去控制，而不是给所有的共用一个show；追问

嗯，我也考虑过，但是在json文件中加个这属性，感觉有点奇怪~可有别的方法？
目前我的数据是父组件接受的json，然后传到了这个子组件中。

追答

要独立控制，就只能有独立的属性去作为开关，不然没法实现吧；我目前就只想到了这种

如何在 Vue js 的 v-for 循环中使用 v-model

【中文标题】如何在 Vue js 的 v-for 循环中使用 v-model

【英文标题】：How to use v-model inside v-for loop in Vue js

【发布时间】：2020-07-01 02:41:18

【问题描述】：

这是我在这里的第一个问题，我真的很绝望，希望你能帮助我。

我正在尝试使用 vuejs 构建像 Facebook 这样的帖子/评论/回复系统，我使用 v-for 在使用 Axios 获取数据库中的数据后循环所有帖子/cmets/回复（使用 laravel API），这里的问题是，当我输入我的输入时，我输入的 v-model 附加到我的 v-for 循环内的表单中，它出现在所有其他已循环的输入中，这是一个更好理解的图像 - > duplicate input,

        <div class="panel panel-white post panel-shadow" v-for="(post) in posts" >
            <div class="post-heading">
                <div class="pull-left image">
                    <img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" >
                </div>
                <div class="pull-left meta">
                    <div class="title h5">
                        <a href="#"><b>post.user.name  </b></a>

                        made a post.
                    </div>
                    <h6 class="text-muted time">(number) minute ago</h6>
                </div>
            </div>
            <div class="post-description">
                <p>post.content</p>
                <div class="stats">
                    <a href="#" class="btn btn-default stat-item">
                        <i class="fa fa-thumbs-up icon"></i>2
                    </a>
                    <a href="#" class="btn btn-default stat-item">
                        <i class="fa fa-share icon"></i>12
                    </a>
                </div>
            </div>
            <div class="post-footer">
                <form>
                    <div class="input-group">
                        <input  type="text" name="comment" class="form-control" v-model.lazy="comments.comment" :class=" 'is-invalid': comments.errors.has('comment') " required="required" autocomplete="off">
                        <has-error  :form="comments" field="comment"></has-error>
                        <span class="input-group-addon">
                                    <button type="submit" class="fa fa-send form-control"  @click.prevent="addComment(post.id)" >Send</button>
                    </span>
                    </div>
                </form>
                <ul class="comments-list" v-for="(comment) in post.comments?post.comments:''">
                    <li class="comment" >
                        <a class="pull-left" href="#">
                            <img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" >
                        </a>
                        <div class="comment-body">
                            <div class="comment-heading">
                                <h4 class="user">comment.user?comment.user.name:"-"</h4>
                                <h5 class="time">(number) minutes ago</h5>
                            </div>
                            <p>comment.comment</p>
                            <form>
                                <div class="input-group">
                                    <input type="text" name="reply" class="form-control" v-model="replies.reply" :class=" 'is-invalid': replies.errors.has('reply') " required="required" autocomplete="off">
                                    <has-error  :form="replies" field="reply"></has-error>
                                    <span class="input-group-addon">
                                    <button type="submit" class="fa fa-send form-control"  @click.prevent="addReply(comment.id)" >Send</button>
                    </span>
                                </div>
                            </form>
                        </div>
                        <ul class="comments-list" v-for="reply in comment.reply?comment.reply:''">
                            <li class="comment">
                                <a class="pull-left" href="#">
                                    <img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" >
                                </a>
                                <div class="comment-body">
                                    <div class="comment-heading">
                                        <h4 class="user">reply.user.name</h4>
                                        <h5 class="time">(number) minutes ago</h5>
                                    </div>
                                    <p>reply.reply</p>

                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

【问题讨论】：

尝试在 v-model 中使用索引，例如 v-model="replies[index].reply"

我试过了，效果不好

【参考方案1】：

最简单的方法是将每个帖子、评论和回复放在单独的组件中，记住这是用于拥有单独的状态（或数据）的组件，您可以通过这种方式轻松操作它，这样您不仅难以扩展而且难以阅读。

但唯一的方法是像我说的那样在循环中绑定一个状态，你可以尝试使用计算

v-model="replies[index].reply"

到：

v-model="replyComputed(index)"

【参考方案2】：

您的问题是replies.reply 对于每个循环评论都是相同的。您应该将回复绑定到您当前正在迭代的特定评论，例如v-model="comment.reply".

【讨论】：

我将我的回复绑定到评论，当我点击发送时，后端一切正常当我开始输入模型时，它会出现在我的 v-for 循环中的每个输入中

出于同样的原因，它在视觉上是相同的，您的 v-model 在每个输入中都绑定到相同的回复。您应该为每条评论添加一个属性，就像输入的占位符一样，您可以稍后删除它，或者按照@TEFO 的建议使用索引。