Tag: vuejs2

使用Vue进行文件上传的最佳方法

我第一次尝试设置多个文件上传的VueJS视图。 现在我有这个： 首先，我们是否有很好的Vue库可以解决这个问题？ 我应该保留Vue还是尝试使用jquery甚至纯js？

带有点击事件处理程序的Vue 2.0

如何使用vue2.0和jquery onclick事件方法？ 当我研究特定问题时，在vue上定义了这个。$ el.addEventListener（’click’，this.onClick）的挂载。 但对我来说似乎并不是很清楚。 我需要这里的帮助。 好心提醒 正如我的代码在jquery下面： $(document).on(“click”,”.ballNum li”,function(){ var robj = $(this); var value = robj.text(); var bit = $(this).parents(“.ballNum”).attr(“id”); if(robj.attr(“name”)==”choice”){ robj.removeAttr(“name”); }else{ robj.attr(“name”,”choice”); } var isSave = saveNum(value,bit,”reverse”); if(isSave==1){ $(this).addClass(“active”); }else if(isSave==-1){ $(this).removeClass(“active”); }else{ layer.alert(‘Error’,{icon: 0, title:’Alert’}); }

如何在vue组件中将格式日期时间更改为日期？

我的vue组件是这样的： … {{getDate(item.created_at)}} … export default { … methods: { getDate(datetime) { let date = new Date(datetime).toJSON().slice(0,10).replace(/-/g,’/’) return date } } } 如果我是console.log(datetime) ，结果：2018-03-31 18:23:20 我想只获取日期并将格式更改为：2018年3月31日 我尝试上面的组件，但结果如下：2018/03/31 我尝试使用格式方法和dateformat方法，但它是未定义的 我怎么解决这个问题？

如何在Vue.js中的4个元素之后每次添加一个元素？

我将我的代码移植到Vue.js，这对Vue来说是个新手。 当您看到屏幕截图（下面的链接）时，div中有4列， columns类名称。 我试图使用v-if有条件地添加div（类columns ），但我不知道如何在Vue中获取一些列元素。 示例代码 .container .columns(v-if=””) // add this conditionally .column.is-3.vid(v-for=’item in items’) .panel p.is-marginless a(href=item.videoId) img(src=item.thumbnail) .panel.vidInfo .columns.hax-text-centered .column .panel-item.reddit-ups | item.score i.fa.fa-reddit-alien.fa-2x .panel-item.reddit-date i.fa.fa-calendar.fa-2x

在Vue js中获取JSON属性时出错

我在Vue遇到了一个奇怪的行为。 我将ajax调用存储结果（一些JSON）存储到名为：’modello’的Vue数据属性中。 { “lineaGialla”: { “selected”: false, “descrizione”: “Questa è la descrizione della linea gialla”, “servizi”: [ {“nomeServizio”: “servizio1″,”descrizione”:”descrizione servizio1″,”selected”: false}, {“nomeServizio”: “servizio2″,”descrizione”:”descrizione servizio2″,”selected”: false}, {“nomeServizio”: “servizio3″,”descrizione”:”descrizione servizio3″,”selected”: false} ] } } 在模板中，当我使用{{modello.lineaGialla}}访问数据属性lineaGialla时，它可以正常工作，但是当我尝试访问嵌套属性时，例如{{modello.lineaGialla.descrizione}} ，我得到一个错误安慰： [Vue警告]：渲染函数出错：“TypeError：无法读取未定义的属性’descrizione’” 这里是ajax电话。 var getData = function(){ return new Promise(function(resolve, reject){ $.ajax({ type:’get’, url:’https://api.myjson.com/bins/w9xlb’, dataType: ‘json’, success: function(response){ resolve(response); } }); }); […]

一起使用intl-tel-input和vuejs2

我正在尝试使用vuejs2实现https://github.com/jackocnr/intl-tel-input 。 如果我添加一个jQuery document.ready ， $(‘#phone’).intlTelInput({ options…}) 一切都按预期工作但当我试图获取输入字段的值和一些boolean有效属性时，我总是检查一步后面的值。 我的检查方法如下： validatePhoneNumber: function() { var validPhoneNo = $(“#phone”).intlTelInput(“isValidNumber”); var phoneNo = $(“#phone”).intlTelInput(“getNumber”); console.log(phoneNo + ‘ -> ‘ + validPhoneNo); //this line returns values one step behind bus.$emit(‘validate-phone’, validPhoneNo) } HTML： 我相信解决方案是为此事创建一个新指令，我尝试了以下方法： 删除了我在intlTelInput上实例化intlTelInput的部分，并改为： Vue.directive(‘telinput’, { bind: function(el) { $(el).intlTelInput({ //options here… } }); 并在上面的HTML代码中添加了v-telinput 。 有了这个，似乎没有任何作用。 我在那里错过了什么？

如何将Vue组件插入动态位置？

很多面板（产品）显示在多行和多列的页面中。 我正在使用Vue 2，面板是组件。 现在，在单击面板时，我想在该行的下方显示该面板的详细信息。 这类似于Google图片搜索。 例如，在上图中，如果我单击s1，s2或s3中的任何一个，则大面板将出现在s3（该行的最后一个元素）之后。 同样，对于单击s4或s5，大面板出现在s5之后。 **一行中的项目数将根据屏幕大小而有所不同。 如何找到行的最后一个元素并在该元素后插入一个组件？

我在模板中使用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’) })

使用带计算filter的Vuejs时出现问题

我正在使用带有复选框的Vuejs编写filter应用程序。 当我使用单一复选框时，它运作良好。 但是，当我检查超过2个复选框时，它会删除结果。 例如，当我选中绿色和红色时，它应该显示标题1和标题2.或者当我检查绿色，红色，活动，完成时，它应该显示标题1和标题2。 您可以访问我的代码： https ： //jsfiddle.net/dalenguyen/xLcvdy0n/1/ HTML代码： Filter by Health Green Red Yellow Status Active Completed Cancelled Reset {{project[‘title’]}} Status {{project[‘Status’]}} Health {{project[‘Health’]}} Vuejs代码： var app = new Vue({ el: ‘.content’, data: { projects: [ { “title”: “Title 1”, “Status”: “Active”, “Health”: “Green”, }, { “title”: “Title 2”, “Status”: “Completed”, “Health”: “Red”, }, […]

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 […]