- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 JS 更新 v-html 绑定(bind),但我似乎有点卡住了。有人可以帮忙吗?
代码的想法是我每页都有一个项目列表。我想创建一个分页。其中分页编号代表current_page
问题是我正在尝试更新页码,但似乎无法使其正常工作。
我已将其添加到 jsfilde 中
var configuration = {
searchableFields: ['title', 'tags', 'actors'],
sortings: {
name_asc: {
field: 'name',
order: 'asc'
}
},
aggregations: {
tags: {
title: 'Tags',
size: 10
},
actors: {
title: 'Actors',
size: 10
},
genres: {
title: 'Genres',
size: 10
}
}
}
// the rows comes from external resources
// https://github.com/itemsapi/itemsapi-example-data/blob/master/jsfiddle/imdb.js
itemsjs = itemsjs(rows, configuration);
var per_page = 3;
var current_page = 1;
var vm = new Vue({
el: '#el',
data: function() {
// making it more generic
var filters = {};
Object.keys(configuration.aggregations).map(function(v) {
filters[v] = [];
})
return {
query: '',
// initializing filters with empty arrays
filters: filters,
}
},
methods: {
reset: function() {
var filters = {};
Object.keys(configuration.aggregations).map(function(v) {
filters[v] = [];
})
this.filters = filters;
this.query = '';
}
},
computed: {
searchResult: function() {
var result = itemsjs.search({
query: this.query,
filters: this.filters,
per_page: per_page,
page: current_page
})
return result
}
}
});
var content = "";
var active = "";
var total = document.getElementById("pagination__total").value;
var num_pages = Math.ceil(total / per_page);
console.log(num_pages);
for (var i = 1; i <= num_pages; i++) {
active = current_page == i ? "is-current" : "";
content += `<li class="pagination-link is-size-6 ${active}" data-page="${i}">${i}</li>`;
}
document.querySelector(".pagination-list").innerHTML = content;
content = "";
let pagination = document.querySelectorAll(".pagination-link");
for (let i = 0; i < pagination.length; i++) {
pagination[i].addEventListener("click", ev => {
current_page = ev.target.getAttribute("data-page");
console.log(current_page);
vm.searchResult.page = current_page;
});
}
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.rawgit.com/itemsapi/itemsjs/master/dist/itemsjs.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/itemsapi/itemsapi-example-data/master/jsfiddle/imdb.js"></script>
<div id="el">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#" v-on:click="reset()">ItemsJS movies</a>
</div>
<div id="navbar">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" v-model="query" class="form-control" placeholder="Search">
</div>
</form>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container" style="margin-top: 50px;">
<input type="hidden" v-bind:value="searchResult.pagination.total" id="pagination__total">
<input type="hidden" v-bind:value="searchResult.pagination.page" id="pagination__curent-page">
<h1>List of items ({{ searchResult.pagination.total }})</h1>
<p class="text-muted">Search performed in {{ searchResult.timings.search }} ms, facets in {{ searchResult.timings.facets }} ms</p>
<div class="row">
<div class="col-md-2 col-xs-2">
<div v-for="facet in searchResult.data.aggregations">
<h5 style="margin-bottom: 5px;"><strong style="color: #337ab7;" v-html="facet.title"></strong></h5>
<ul class="browse-list list-unstyled long-list" style="margin-bottom: 0;">
<li v-for="bucket in facet.buckets">
<div class="checkbox block" style="margin-top: 0; margin-bottom: 0;">
<label>
<input class="checkbox" type="checkbox" v-model="filters[facet.name]" v-bind:value="bucket.key">
{{ bucket.key }} ({{ bucket.doc_count }})
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-10 col-xs-10">
<div class="breadcrumbs"></div>
<div class="clearfix"></div>
<!--<h3>List of items ({{ searchResult.pagination.total }})</h3>-->
<table class="table table-striped">
<tbody>
<tr v-for="item of searchResult.data.items">
<td><img style="width: 100px;" v-bind:src="item.image"></td>
<td></td>
<td>
<b v-html="item.name"></b>
<br />
</td>
<td></td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<nav class="pagination is-centered" aria-label="pagination">
<div>
<i class="pagination-previous is-size-6 fas fa-angle-double-left"></i>
<ul class="pagination-list"></ul>
<i class="pagination-next is-size-6 fas fa-angle-double-right"></i>
</div>
</nav>
<div class="clearfix" style="margin-bottom: 100px;"></div>
</div>
</div>
</div>
最佳答案
只需将current_page
放入data
...
var vm = new Vue({
data: function() {
...
return {
query: '',
current_page,
filters: filters
}
}
...
}
<小时/>
然后使用vm.current_page
而不是current_page
pagination[i].addEventListener("click", ev => {
vm.current_page = ev.target.getAttribute("data-page");
console.log(vm.current_page);
});
和
searchResult: function() {
var result = itemsjs.search({
query: this.query,
filters: this.filters,
per_page: per_page,
page: this.current_page // <-----
})
return result
}
关于javascript - VueJS动态更新v-html内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55195029/
我查看了网站上的一些问题,但还没有完全弄清楚我做错了什么。我有一些这样的代码: var mongoose = require('mongoose'), db = mongoose.connect('m
基本上,根据 this bl.ocks,我试图在开始新序列之前让所有 block 都变为 0。我认为我需要的是以下顺序: 更新为0 退出到0 更新随机数 输入新号码 我尝试通过添加以下代码块来遵循上述
我试图通过使用随机数在循环中设置 JSlider 位置来模拟“赛马”的投注结果。我的问题是,当然,我无法在线程执行时更新 GUI,因此我的 JSlider 似乎没有在竞赛,它们从头到尾都在运行。我尝试
该功能非常简单: 变量:$table是正在更新的表$fields 是表中的字段,$values 从帖子生成并放入 $values 数组中而$where是表的索引字段的id值$indxfldnm 是索引
让我们想象一个环境:有一个数据库客户端和一个数据库服务器。数据库客户端可以是 Java 程序或其他程序等;数据库服务器可以是mysql、oracle等。 需求是在数据库服务器上的一个表中插入大量记录。
在我当前的应用程序中,我正在制作一个菜单结构,它可以递归地创建自己的子菜单。然而,由于这个原因,我发现很难也允许某种重新排序方法。大多数应用程序可能只是通过“排序”列进行排序,但是在这种情况下,尽管这
Provisioning Profile 有 key , key 链依赖于它。我想知道 key 什么时候会改变。 Key will change after renew Provisioning Pr
截至目前,我在\server\publications.js 中有我的 MongoDB“选择”,例如: Meteor.publish("jobLocations", function () { r
我读到 UI 应该始终在主线程上更新。但是,当谈到实现这些更新的首选方法时,我有点困惑。 我有各种函数可以执行一些条件检查,然后使用结果来确定如何更新 UI。我的问题是整个函数应该在主线程上运行吗?应
我在代理后面,我无法构建 Docker 镜像。 我试过 FROM ubuntu , FROM centos和 FROM alpine ,但是 apt-get update/yum update/apk
我构建了一个 Java 应用程序,它向外部授权客户端公开网络服务。 Web 服务使用带有证书身份验证的 WS-security。基本上我们充当自定义证书颁发机构 - 我们在我们的服务器上维护一个 ja
因此,我有时会在上传新版本时使用 app_offline.htm 使应用程序离线。 但是,当我上传较大的 dll 时,我收到黄色错误屏幕,指出无法加载 dll。 这似乎与我对 app_offline.
我刚刚下载了 VS Apache Cordova Tools Update 5,但遇到了 Node 和 NPM 的问题。我使用默认的空白 cordova 项目进行测试。 版本 如果我在 VS 项目中对
所以我有一个使用传单库实例化的 map 对象。 map 实例在单独的模板中创建并以这种方式路由:- var app = angular.module('myApp', ['ui', 'ngResour
我使用较早的 Java 6 u 3 获得的帧速率是新版本的两倍。很奇怪。谁能解释一下? 在 Core 2 Duo 1.83ghz 上,集成视频(仅使用一个内核)- 1500(较旧的 java)与 70
我正在使用 angular 1.2 ng-repeat 创建的 div 也包含 ng-click 点击时 ng-click 更新 $scope $scope 中的变化反射(reflect)在使用 $a
这些方法有什么区别 public final void moveCamera(CameraUpdate更新)和public final void animateCamera (CameraUpdate
我尝试了另一篇文章中某人评论中关于如何将树更改为列表的建议。但是,我在某处(或某物)有未声明的变量,所以我列表中的值是 [_G667, _G673, _G679],而不是 [5, 2, 6],这是正确
实现以下场景的最佳方法是什么? 我需要从java应用程序调用/查询包含数百万条记录的数据库表。然后,对于表中的每条记录,我的应用程序应该调用第三方 API 并获取状态字段作为响应。然后我的应用程序应该
只是在编写一些与 java 图形相关的代码,这是我今天的讲座中的非常简单的示例。不管怎样,互联网似乎说更新不会被系统触发器调用,例如调整框架大小等。在这个例子中,更新是由这样的触发器调用的(因此当我只
我是一名优秀的程序员,十分优秀!