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

Posted

技术标签:

【中文标题】如何重新制作 html + vuejs 代码,使其在包含多个帖子的页面上工作?【英文标题】:How to remake html + vuejs code so that it works on a page with several posts? 【发布时间】: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的新手,不知道如何实现。

请帮帮我!

【问题讨论】:

您是使用生成 htmlphp 循环还是通过 vuejs v-for 显示新闻? @tete0148: 我用 PHP 循环显示新闻 【参考方案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>

【讨论】:

以上是关于如何重新制作 html + vuejs 代码,使其在包含多个帖子的页面上工作?的主要内容,如果未能解决你的问题,请参考以下文章

如何制作脚本/程序以使其始终运行?

Bootstrap 4:如何通过 jquery 或 vuejs 单击列表组项目时使其处于活动状态?

Vuejs2:数组更改时如何重新渲染数组计算属性

vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面

vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面

如何从父级更新 vuejs 组件