如何重新制作 html + vuejs 代码，使其在包含多个帖子的页面上工作？答案

【问题标题】：How to remake html + vuejs code so that it works on a page with several posts?如何重新制作 html + vuejs 代码，使其在包含多个帖子的页面上工作？
【发布时间】：2017-12-26 02:14:21
【问题描述】：

帖子编辑页面上有完整的工作代码

<a href="#" v-on:click="confirm = 1" v-show="!confirm" class="btn btn-xs btn-danger">Delete</a>
<span v-if="confirm">
    Are you sure?
    <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a>
    <a href="#" v-on:click="confirm = 0" class="btn btn-xs btn-success">No</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">Delete</a>
<span v-if="confirm[{{ $news->id }}]">
    Are you sure?
    <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a>
    <a href="#" v-on:click="confirm[{{ $news->id }}] = 0" class="btn btn-xs btn-success">No</a>
</span>

和这个：

<a href="#" v-on:click="confirm[{!! $news->id !!}] = 1" v-show="!confirm[{!! $news->id !!}]" class="btn btn-xs btn-danger">Delete</a>
<span v-if="confirm[{!! $news->id !!}]">
    Are you sure?
    <a href="{{ route('admin:news:delete', $news->id) }}" class="btn btn-xs btn-danger">Yes</a>
    <a href="#" v-on:click="confirm[{!! $news->id !!}] = 0" class="btn btn-xs btn-success">No</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的新手，不知道如何实现。

请帮帮我！

【问题讨论】：

您是使用生成 HTML 的 PHP 循环还是通过 vuejs v-for 显示新闻？
@tete0148: 我用 PHP 循环显示新闻

标签： html laravel vue.js

【解决方案1】：

由于您将 $news 变量存储在组件状态中，因此您必须使用 vuejs 语法访问 news 变量：您不需要在变量名称前加上 $。

我认为您使用 v- 来显示新闻，但您尝试插入不存在的 PHP 变量。

【讨论】：

【解决方案2】：

我已经解决了！！！

我不知道它是如何工作的，但它确实有效！！！请解释一下。

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

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

【讨论】：