Почему не работает v-if с массивом?

Question

[Devid]

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

<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
	}
});

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

<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;
        });
    }
});

Во втором варианте

<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>

span не появляется. v-if не работает с массивами или проблема в чем то другом?

Answer 1

[Artem0071]

скорее всего в этом:
v-if="confirm[{{ $news->id }}]"

Comments

[Artem0071]

ой, не дописал идею

{{ ... }} - используется в ларавеле и во вью
чтобы использовать их правильно, то нужно писать в виде: {!! ... !!}

[Artem0071]

попробуйте так:
v-if="confirm[{!! $news->id !!}]"

[Devid]

Artem0071: не помогло(

Answer 2

[Vladimir Zhosan]

Не имейте привычку смешивать php с vue.js. Бэк должен остаться бэком.

Comments

[Devid]

Vladimir Zhosan ну массив с юзерами, например, приходит в index.blade.php его же надо как то отобразить. Можно

@foreache ($users as $user)
@endforeach

а можно через v-if.
И как это тогда не смешивать?