Показывать конкретный div `@ click` в цикле в vuejs и laravel - PullRequest
Новая
       6

Показывать конкретный div `@ click` в цикле в vuejs и laravel

0 голосов
/ 11 июня 2018

Я пытаюсь показать скрытое погружение при нажатии, но у меня возникают проблемы с использованием цикла, в котором все мои дивы являются динамическими.Когда я нажимаю кнопку, на ней отображаются все элементы 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 is- 

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

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

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Если вы не хотите перемещать это в свой собственный компонент, вам понадобится уникальный идентификатор, чтобы показать, какой 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) }">

Этот подход подойдет для очень небольшого проекта или проекта, где vue не используется так часто, если это не так, япредложил бы рефакторинг этого компонента вместо.

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

0 голосов
/ 11 июня 2018

Массив предметов отображается в клинке, поэтому, когда он попадает во внешний интерфейс, 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) для обновления соответствующего элемента в массиве.

Вам потребуется обновить элемент одним из перечисленных методов в документе .

...