如何重新制作 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的新手,不知道如何实现。
请帮帮我!
【问题讨论】:
您是使用生成 html 的 php 循环还是通过 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 单击列表组项目时使其处于活动状态?
vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面