Как переделать html+vuejs код чтобы он работал на странице с несколькими постами?

Question

[Devid]

Есть полностью рабочий код на странице редактирования поста

<a href="#" v-on:click="confirm = 1" v-show="!confirm" class="btn btn-xs btn-danger">Удалить</a>
<span v-if="confirm">
    Вы уверены?
    <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">да</a>
    <a href="#" v-on:click="confirm = 0" class="btn btn-xs btn-success">нет</a>
</span>

var app = new Vue({
  el: '#app',
  data: {
      confirm: 0
  }
});

Нужен такой же функционал только на странице где информация по каждому посту выводится в таблице. То есть если выводится 10 строчек, то нужно такую кнопку для каждой строчки.
Если добавить вышеописанный код то при нажатии на одну кнопку срабатываю все, а нужно чтобы срабатывала только нажатая.
Я пробовал сделать вот так:

<a href="#" v-on:click="confirm[{{ $news->id }}] = 1" v-show="!confirm[{{ $news->id }}]" class="btn btn-xs btn-danger">Удалить</a>
<span v-if="confirm[{{ $news->id }}]">
    Вы уверены?
    <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">да</a>
    <a href="#" v-on:click="confirm[{{ $news->id }}] = 0" class="btn btn-xs btn-success">нет</a>
</span>

И вот так:

<a href="#" v-on:click="confirm[{!! $news->id !!}] = 1" v-show="!confirm[{!! $news->id !!}]" class="btn btn-xs btn-danger">Удалить</a>
<span v-if="confirm[{!! $news->id !!}]">
    Вы уверены?
    <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">да</a>
    <a href="#" v-on:click="confirm[{!! $news->id !!}] = 0" class="btn btn-xs btn-success">нет</a>
</span>

var app = new Vue({
  el: '#app',
  data: {
      confirm: []
  },
  created: function () {
        var items = this.confirm;
        var news = {!! $news->toJson() !!}
        news.data.forEach(function(element) {
            items[element.id] = 0;
        });
    }
});

но это не работает.
Я думаю это обычная задача и ее уже много раз делали, но так как я только начал разбираться во vuejs, то не знаю как это реализовать.
Помогите, пожалуйста.

Answer 1

[Devid]

Я это сделал! Не знаю как и почему этот код работает, то он работает!
Если кто то поймет, поделитесь, пожалуйста.

<button v-on:click="setItemId1({{ $news->id }})" v-bind:class="activeClass" v-show="!items[{{ $news->id }}]" class="btn btn-xs btn-primary">Delete</button>
<span v-if="items[{{ $news->id }}]">
    <a href="{{ route('admin.news.delete', $news->id) }}" class="btn btn-xs btn-success">Yes</a>
    <a href="#" v-on:click="setItemId0({{ $news->id }})" class="btn btn-xs btn-danger">No</a>
</span>

var app = new Vue({
    el: '#app',
    data: {
        items: {},
        activeClass: 'active'
    },
    created: function () {
        var items = this.items;
        var news = {!! $news->toJson() !!};
        news.data.forEach(function(element) {
            items[element.id] = 0;
        });
    },
    methods: {
        setItemId1: function (item_id) {
            this.activeClass = 'active2';
            this.activeClass = 'active3';
            var items = this.items;
            Object.keys(this.items).forEach(function(key) {
                if (item_id == key) {
                    items[key] = 1;
                } else {
                    items[key] = 0;
                }
            });
        },
        setItemId0: function (item_id) {
            this.activeClass = 'active2';
            this.activeClass = 'active3';
            this.items[item_id] = 0;
        }
    }
});

Comments

[Devid]

И без v-bind:class="activeClass"
не работает. Почему?