Question

我试图在点击时显示隐藏的潜水但是，我在使用循环时遇到麻烦，其中我的所有div都是动态的。当我点击按钮时，它显示所有div，但我想在单击时显示特定的单个div。我试过这样的事情 -

index.blade.php

<div class="col-md-12" id="questionsection">
  @foreach ($data['a'] as $row)
    <div class="row">
      <div class="col-sm-2"></div>
      <div class="col-sm-10">
         <button @click='myFilter($event)'>Comment</button>
         <div v-bind:class="{ noActive: isActive }">
            <form action="#" method="POST">
              <textarea class="textarea" name="answer"></textarea>
              <button>Save</button>
            </form>
         </div>
       </div>
     </div>
   @endforeach
</div>

.noActive {display：none}

在vuejs中script是 -

<script>
  var vm = new Vue({
    el: '#myApp',
    data: {
      isActive: true,
    },

    methods: {
      myFilter: function (event){
        this.isActive = !this.isActive;
      }
    }
  })
</script>

Answer 1

如果您不想将其移动到自己的组件，那么您将需要一个唯一的标识符来显示循环中哪个div是活动的。您当前的设置无法知道哪个div已被点击，您只需切换单个标记即表示所有div都没有显示。

解决这个问题的一种方法是使用foreach循环的索引，例如

@foreach($data['a'] as $key => $row)

然后你的vue实例可以：

<script>
    var vm = new Vue({
        el: '#myApp',
        data: {
            activeKey: null,
        },

        methods: {
            isActive(i) {
                return this.activeKey === i;
            },
            toggleActive(i) {
                this.activeKey = this.isActive(i) ? null : i;
            }
        }
    })
</script>

由于逻辑略有改变，您需要更新刀片文件中的几行：

<button @click='toggleActive($key)'>Comment</button>
<div v-bind:class="{ noActive: isActive($key) }">

对于一个非常小的项目或者没有使用过多的项目，这种方法会很好，但是，如果不是这样的话，我会建议将其重构为一个组件。

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/7

Answer 2

项目数组在刀片中呈现，因此当它到达前端时，Vue不知道它。此外，isActive对应用程序组件是全局的，因此它适用于所有项目。

您需要将数组作为道具传递给vue组件，然后使用v-for将其循环。

<div class="row" v-for="(item, index) in {{ data['a'] }}" :key="index">
    <!-- same body of the loop as before -->
</div>

然后将索引和项添加到myFilter($event, index, item)函数以更新数组中的相应项。

您需要使用列出in the doc列出的方法之一更新项目。

在vuejs和laravel的循环中显示特定的div` @ click`

2 个答案: