Vue.js v-show 在列表中

Posted 2023-02-22

【中文标题】Vue.js v-show 在列表中

【英文标题】：Vue.js v-show in a list

【发布时间】：2017-02-08 06:33:19

【问题描述】：

我相信这对你们来说会非常容易。我正在尝试制作一个简单的帖子列表，其中帖子标题始终可见，当您单击列表中的特定帖子时，您将获得帖子的正文。我为此使用了v-show。但是，当我单击特定帖子时，会显示所有帖子的正文，而不仅仅是我单击的那个。

这是模板：

<template>
<div class="container">
    <h1>My Posts</h1>
    <ul class="list-group">
        <li class="list-group-item" v-for="post in list">
            <div @click="changeShow">
                <h4> post.title </h4>
                <p v-show="show"> post.body </p>
                <span v-show="show" class="label label-primary">ID:  post.userId </span>
            </div>
        </li>
    </ul>

</div>

还有逻辑：

<script>

export default

    data()
        return
            msg:'hello vue',
            list: [],
            show: false
        
    ,
    ready()
        this.fetchPostList();
    ,

    methods:
        fetchPostList: function () 
            var root = 'http://jsonplaceholder.typicode.com';
            this.$http.get(root + '/posts').then(function (response) 
                this.list = response.data;
            )
        ,
        changeShow: function () 
            this.show = !this.show;
        
    

【参考方案1】：

根据您的需要，有几种方法可以解决此问题。

多重打开

您可以将每个帖子设为自己的组件，这样您就可以将show 绑定到每个单独的帖子而不是所有帖子。

Vue.component('post', 
  template: '#post-template',
  props: 
    post: Object,
  ,
  data() 
    return 
      show: false,
    
  ,
  methods: 
    toggleShow() 
      this.show = !this.show
    ,
  ,
)

那么你可以这样使用它：

<post v-for="post in posts" :post="post"></post>

一开

如果您只想打开一个，您可以传递一个 id 作为道具并在此基础上显示它。

Vue.component('post', 
  template: '#post-template',
  props: 
    post: Object,
    selectedId: Number,
  ,
  computed: 
    show() 
      return this.post.id === this.selectedId
    ,
  ,
)

那么你就可以这样做了

<post :selected-id="selectedId" :post="post" @click="selectedId = post.id"></post>

【参考方案2】：

我以不同的方式作弊。只需为每个帖子添加一个显示属性并切换它。

new Vue(
  el: 'body',
  data: 
    list: []
  ,
  ready: function() 
    this.fetchPostList()
  ,
  methods: 
    fetchPostList: function() 
      setTimeout(function() 
        this.list.push(
          title: 'First Post',
          body: 'This is the first Post',
          userId: 'Joe',
          show: false
        );
        this.list.push(
          title: 'Second Post',
          body: 'This is the second Post',
          userId: 'Joe',
          show: false
        );
        this.list.push(
          title: 'Third Post',
          body: 'This is the third Post',
          userId: 'Joe',
          show: false
        );
      .bind(this), 2000);
    ,
    changeShow: function(idx) 
      this.list[idx].show = !this.list[idx].show;
    
  
);

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div class="container">
  <h1>My Posts</h1>
  <ul class="list-group">
    <li class="list-group-item" v-for="post in list">
      <div @click="changeShow($index)">
        <h4> post.title </h4>
        <p v-show="post.show"> post.body </p>
        <span v-show="post.show" class="label label-primary">ID:  post.userId </span>
      </div>
    </li>
  </ul>
</div>

【参考方案3】：

首先，我将举一个例子的方法没有用，但我写信是为了表明有这样的方法。

例如

<script>
export default 
  data: 
    isShow: false,
    postUserId: null,
  ,
;
</script>

<template>
  <div class="container">
    <h1>My Posts</h1>
    <ul class="list-group">
      <li class="list-group-item" v-for="post in list">
        <div @click="postUserId = post.userId; isShow = !isShow">
          <h4> post.title </h4>
          <p v-show="show"> post.body </p>
          <span v-show="isShow && postUserId == post.userId" class="label label-primary">ID:  post.userId </span>
        </div>
      </li>
    </ul>
  </div>
</template>