草庐IT

Bootstrap-vue

全部标签

javascript - 尝试通过 Vue.js 中的渲染传递 Prop 并观看它们

我在使用vue.js中的CreateElement/render将Prop从父级向下传递到创建的子级时遇到问题,然后再观看它。这是我的父组件Vue.component('my-drawing',MyDrawing)newVue({el:'#drawing',mounted(){Bus.$on('emitColorSelection',(emitString)=>{console.log("insidesocket.js/my-drawingandemitStringis",emitString);this.useColor=emitString;console.log('insides

javascript - 如何使用 Vue Slider 控制元素

我在requestsjson对象中有一堆数据。默认情况下,所有数据都会显示给用户。此外,我还有一个slider组件。我正在尝试实现这样的功能,即当用户移动slider时,json的元素会根据slider的值出现/消失。例如:数据:requests:[{value:10,name:"foo"},{value:12,name:"bar"},{value:14,name:"foobar"},{value:22,name:"test"},{value:1,name:"testtooo"},{value:8,name:"something"}]默认情况下,我希望显示所有数据,但当用户移动slid

javascript - Angular UI Bootstrap Slider 每张幻灯片多个项目

我正在连接到Web服务,并希望为每张幻灯片填充4个项目的UIBootstrap轮播。我正在使用|limitTo:4,但我需要一种方法来限制总共10张幻灯片中的每张幻灯片4张。这是HTML{{event.title}}引用Controllerapp.controller("eventsController",function($scope,$http){varevents=$http.get('/events');events.success(function(data){$scope.eventData=data.events["event"];console.log($scope.e

javascript - 将背景更改为静态以打开 Bootstrap 模式

我可以在模式打开时将背景更改为“静态”吗?我有带有表单提交按钮的模态。当我单击此按钮时,我会在我的模式上显示加载微调器,那是我想将背景更改为静态的时刻我尝试了$('#myModal').modal({backdrop:'static',keyboard:false}),但我仍然可以通过单击背景或使用退出按钮来关闭我的模式.第二步应该是将背景改回真实,但我还没有尝试过,因为首先我需要将背景设置为静态。我可以在模式显示时将背景设置为静态,但我想避免这种情况并在提交后更改它。有什么想法吗? 最佳答案 好的,我解决了这个问题。也许这不是最好

javascript - 从 vue-resource 切换到 axios

使用vue-resource,我们可以像这样在main.js中设置根url:Vue.http.options.root='http://localhost:3000/api'我尝试将其替换为:axios.defaults.baseURL='http://localhost:3000/api';Vue.prototype.$http=axios但是,现在我的post调用没有按预期工作,并且Vue.http.post抛出错误。这是如何实现的? 最佳答案 使用axios,可以创建另一个实例havingacustomconfigvarmy_

javascript - 如何根据其他列动态更改 Bootstrap 列宽度?

假设我们在bootstrap中创建了一行,然后添加了两列,一个用于博客内容,位于左侧(col-sm-7),另一个用于侧边栏(col-sm-5),位于右侧。当col-sm-5的高度小于col-sm-7的高度时(或者换句话说:whenthere'snocontentonthesidebar?:假设用户只添加了一个小部件。问题是,侧边栏将占据所有右侧,这不好看。)这是一张展示我的意思的图片: 最佳答案 如前所述,使用标准的Bootstrap网格无法做到这一点。然而,通过遵守这些“规则”,通过一些CSS调整是可能的。先放侧边栏,然后向右浮动

javascript - 如何通过异步 httpclient 调用使用 ngx-bootstrap typeahead

我正在尝试使用来自Angular4中的休息后端的异步结果填充nxg-bootstraptypeahead。他们的网站有一个示例(https://valor-software.com/ngx-bootstrap/#/typeahead)关于如何使用模拟可观察数据执行此操作,但我正在努力这样做与http客户端。使用它的所有示例都使用旧的Http模块,而不是Angular4中使用的新的HttpClient模块。这是他们的例子:import{Component}from'@angular/core';import{Observable}from'rxjs/Observable';import'

javascript - Vue.js 使用计算属性来显示或隐藏组件的一部分

我试图根据下拉列表中的值显示/隐藏组件的一部分。在移动我的表单的这一部分之前,使用计算属性工作得很好。但是......我在我的组件中使用了两种方式绑定(bind),而且我正在使用的属性的计算值似乎更新得太晚了。这里是组件jsVue.component('system',{template:'#system',props:['name','count'],computed:{issummit:function(){returnthis.name==='5a37fda9f13db4987411afd8';}//audiovideo:function(){//returnthis.syste

javascript - 在 ES6 : "Failed to resolve module specifier "vue""中导入包

尝试遵循一些Vue教程,但我目前无法在.js文件中导入Vue,然后在我的index.html中导入此文件。这就是我在index.html中导入脚本的方式:如果我在我的main.js文件中这样做:importVuefrom'vue';我在浏览器控制台中收到以下错误:UncaughtTypeError:Failedtoresolvemodulespecifier"vue".Relativereferencesmuststartwitheither"/","./",or"../".如果我的导入行:importVuefrom'../../node_modules/vue';然后我得到一个不同的

javascript - Bootstrap Affix 更改列表项宽度

我正在使用TwitterBootstrap的词缀来附加当前包含导航列表的左栏。NavigationLink1Link2根据我的理解,这意味着在滚动300px之前词缀不会生效。我的问题是词缀加入后我的列表项的宽度发生了变化。这是我在词缀开始之前将鼠标悬停在列表项上的屏幕截图。您可以根据悬停背景,宽度是正确的。这是我滚动300像素并添加词缀后的屏幕截图。您可以看到由于某种原因宽度减小了。我想知道为什么会这样,如何纠正它,以及我是否正确使用词缀。 最佳答案 经过一些研究,我弄清楚了问题所在。在词缀开始之前,宽度是从“span3”div继承