Tag: vue.js

如何在初始vue.js / vue-router加载时加载所有服务器端数据？

我目前正在使用WordPress REST API和vue-router在小型单页网站上的页面之间进行转换。 但是，当我使用REST API对服务器进行AJAX调用时，数据会加载，但只有在页面已经呈现之后才会加载。 vue-router文档提供了有关如何在导航到每个路由之前和之后加载数据的见解，但我想知道如何在初始页面加载时加载所有路由和页面数据，绕过每个加载数据的需要。路线被激活的时间。 注意，我正在将我的数据加载到acf属性中，然后使用this.$parent.acfs在.vue文件组件中访问它。 main.js路由器代码： const router = new VueRouter({ routes: [ { path: ‘/’, component: Home }, { path: ‘/about’, component: About }, { path: ‘/tickets’, component: Tickets }, { path: ‘/sponsors’, component: Sponsors }, ], hashbang: false }); exports.router = router; const app = new Vue({ router, data: { acfs: […]

是否可以使用Vue.js触发事件？

我刚刚开始使用Vue.js，并发现自己不断转向jQuery来帮助某些情况。 最近，我试图“触发”（或模仿）某个事件，例如点击或模糊事件，但未成功。 我知道在jQuery中你可以做到以下几点： $(‘#my-selector’).trigger(‘click’); 但是如何使用Vue.js实现这一目标呢？ 我想尽可能地避免使用jQuery。 以下面的例子为例： Click Me! new Vue({ el: “#my-scope”, data: { foo: “Hello World” }, methods: { myClickEvent: function(e) { console.log(e.targetVM); alert(this.foo); }, anotherRandomFunciton: function() { this.myClickEvent(); } } }); 如果我要调用anotherRandomFunciton ，我希望它模拟（或触发）上面的click事件。 但是，我尝试这个事件（或上例中的e ）永远不会传递给函数。 Vue.js有实现这个目标的方法吗？

我在模板中使用vue-router和jQuery，当我切换路由器$（document）.ready（）失败时

我不知道jQuery在vue中的正确用法。 当我刷新页面时， $(document).ready()有一个角色。 但是当我通过vue-router切换页面时， $(document).ready()不起作用。 import $ from ‘jquery’ export default { name: ‘photo’, data() { return { photos: [ {},{},{},{},{} ] } } } $(function () { console.log(‘something’) })

vue js’document.getElementById’的简写

vue js是否有像jQuery的$(‘#id’)那样的document.getElementById(‘#id’)的简写？ 如果是这样，在文档中对此的引用在哪里，以便我可以找到其他信息？

正确实现Vue.js + DataTables

我试图实现Vue.js + jQuery的DataTables，但有一些奇怪的事情发生。 在firefox上查看这个小提琴（不在chrome上工作） ： http ： //jsfiddle.net/chrislandeza/xgv8c01y/ 当我改变DataTable的状态时（例如排序，搜索等）： 列表上新添加的数据消失了 DOM不读取指令或vue属性 我很确定任何试图混合vue.js +数据表的人都会遇到这个问题。 你做了什么来解决这个问题？ 或者是否有一个纯粹的Vue.js脚本/插件，它具有与jquery的DataTable相同（或关闭）的function？ （分页，搜索，排序，显示的条目数等）。 这是上面小提琴的代码： HTML： Name Age {{ user.name }} {{ user.age }} Action Name Age Add JavaScript的： $(document).ready(function () { var dT = $(‘#app-datatable’).DataTable(); }); var vm = new Vue({ el: ‘#app’, data: { newUser: {}, users: [ {name: ‘Chris’, age: […]

VueJs如何制作限制器和范围的分页..？

我有这样的代码： var demoList = new Vue({ el: ‘#demoList’, data: { items: [{ “id”: 1, “name”: “Tom” }, { “id”: 2, “name”: “Kate” }, { “id”: 3, “name”: “Jack” }, { “id”: 4, “name”: “Jill” }, { “id”: 5, “name”: “aa” }, { “id”: 6, “name”: “bb” }, { “id”: 7, “name”: “cc” }, { “id”: […]

Vue组件中的jQuery插件：无法将值传递给prop

我在vue组件中添加了jquery redactor插件。 该插件工作正常但我需要访问html所以我可以在Vue中看到它。 我已经尝试了我能想到的一切，方法，计算属性，但我找不到办法。 它特别棘手，因为Redactor在dom中添加了新的html，我需要从添加的html中获取数据。 目前我收到这个错误， this.$emit is not a function 。 我需要将.redactor-editor的html值放入prop中，以便在vue数据中可用。 var textContent在控制台中正确打印出来但我无法在prop显示。 任何帮助是极大的赞赏。 零件 export default { props: [‘redactorValue’], mounted: function(){ $(‘#question-create-form .question-create-editor’).redactor({ imageUpload:’/urlGoesHereBro/’, plugins: [‘video’, ‘imagemanager’, ‘counter’, ‘limiter’], buttonsHide:[‘html’, ‘formatting’, ‘deleted’, ‘indent’, ‘outdent’, ‘alignment’, ‘horizontalrule’] }); }, computed: { redactorValue: function(){ $(‘#question-create-form .redactor-editor’).on(‘keyup’, function(){ var textContent = $(‘#question-create-form .redactor-editor’).html(); console.log( ‘textContent […]

Vue.js和jQuery？

是否可以在Vue.js中使用jQuery？ 我有一个函数这个函数，我想在我的Vue组件中使用。 该函数基本上将项目滑入和拉出，但是当我使用标签实现时，我得到了一个包含所有项目而不是jQuery代码的列表。 $(“#slideshow > div:gt(0)”).hide(); setInterval(function() { $(‘#slideshow > div:first’) .fadeOut(0) .next() .fadeIn(1000) .end() .appendTo(‘#slideshow’); }, 5000); 如何在我的代码中使用该function？ MG de Jong Sprint 1 {{ days | two_digits }} Days {{ hours | two_digits }} Hours {{ minutes | two_digits }} Minutes export default { props: { date: { type: Number }, }, data() { […]

如何在Vue中使用jQuery插件

我正在VueJS中构建一个Web应用程序，但是我遇到了一个问题。 我想使用jQuery扩展（cropit是特定的）但我不知道如何以正确的方式实例化/ require / import它而不会出错。 我正在为我的应用程序使用de官方CLI工具和de webpack模板。 我在main.js文件中包含了这样的jQuery： import jQuery from ‘jQuery’ window.jQuery = jQuery 现在我正在构建一个图像编辑器组件，我希望像这样实例化crept： export default { ready () { $(document).ready(function ($) { $(‘#image-cropper-wrapper-element’).cropit({ /* options */ }) }) }, } 但我一直在收到错误……现在我的问题是如何通过NPM / Webpack / Vue正确实例化jQuery和插件？ 提前致谢！

让VueJS和jQuery玩得很好

这个问题与使用intl-tel-input和vuejs2有关/类似，这仍然没有答案。 而VueJS使用prop作为数据属性值有一个解决方案，但有点解释“环境”。 所以，长话短说，我动态设置一个新的引导选项卡（标题和URL），然后尝试使用jQuery （重新）绑定一些function。 在我的Vue方法中添加以下行https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258将应用该function，但仅当我触发改变两次。 与第一个（未答复的）问题相同的问题。 有人可以解释一下vueJS和jQuery之间的工作vueJS吗？ 以及如何解决问题，希望无需重写jQuery包。 如果我console.log我的变量似乎落后了一步。 LE： 我为相关提到的问题准备了一支笔： https ： //codepen.io/AngelinCalu/pen/LWvwNq