Questions tagged «vue.js»

我有一个Vue 2项目，其中有许多（50+）个单文件组件。我将Vue-Router用于路由，将Vuex用于状态。 有一个名为helpers.js的文件，其中包含许多通用功能，例如将字符串的首字母大写。该文件如下所示： export default { capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } } 我的main.js文件初始化了应用程序： import Vue from 'vue' import VueResource from "vue-resource" import store from "./store" import Router from "./router" import App from "./components/App.vue" Vue.use(VueResource) const app = new Vue({ router: Router, store, template: '<app></app>', components: { App } …

100 vue.js  vue-router 

我的Vue组件是这样的： <template> <div> <div class="panel-group" v-for="item in list"> ... <div class="panel-body"> <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne"> Show </a> </div> <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel"> ... </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... …

99 vue.js  vuejs2  vue-component 

在安装和启用了ESlint和Prettier的Nuxt应用程序中，我切换到了Visual Studio Code编辑器。 当我打开.vue文件并按CMD+ Shift+P 并选择“格式化文档”时，我的文件根本没有被格式化。 我的 .prettierrc 设置： { "tabWidth": 2, "semi": false, "singleQuote": true } 我有很多源代码行，我无法手动设置它们的格式。我究竟做错了什么？

99 javascript  vue.js  visual-studio-code  nuxt.js  prettier 

我需要在vue.js文件中插入注释，以备将来参考，但我在文档中找不到如何执行此操作。 我已经试过//，/**/，{{-- --}}，和{# #}，但他们都不工作。 我正在使用Laravel的刀片。因此，这是sample_file.vue： <template> <div class="media"> <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button> {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}} <div class="media-left"> <a href="#"> <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'"> </a> </div> <div class="media-body"> <strong>{{ …

98 vue.js  blade  laravel-blade 

我正在学习Vue.js。在Vue中，我有一个文本字段和一个按钮。默认情况下，当有人按下键盘上的Enter键时，此按钮将提交表单。当有人在文本字段中键入内容时，我想捕获每个按下的键。如果键是“ @”符号，我想做一些特别的事情。如果按下的键是“ Enter”键，那么我也想做一些特别的事情。后者是给我挑战的人。目前，我有这个Fiddle，其中包含以下代码： new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { validateEmailAddress: function(e) { if (e.keyCode === 13) { alert('Enter was pressed'); } else if (e.keyCode === 50) { alert('@ was pressed'); } this.log += e.key; }, postEmailAddress: function() { this.log += '\n\nPosting'; } }); …

98 javascript  vue.js 

因此，我想将道具传递给Vue组件，但是我希望这些道具将来从该组件内部进行更改，例如，当我使用AJAX从内部更新该Vue组件时。因此它们仅用于组件的初始化。 我的cars-listVue组件元素，我将具有初始属性的道具传递给single-car： // cars-list.vue <script> export default { data: function() { return { cars: [ { color: 'red', maxSpeed: 200, }, { color: 'blue', maxSpeed: 195, }, ] } }, } </script> <template> <div> <template v-for="car in cars"> <single-car :initial-properties="car"></single-car> </template> </div> </template> 我现在就做它的方式，我的内部single-car组件我指定 this.initialProperties我this.data.properties的created()初始化钩。它的工作原理是反应性的。 // single-car.vue <script> export default …

97 javascript  vue.js 

Наэтотвопросестьответына堆栈溢出нарусском：КаквVUE路由器открытьссылкувновойвкладке？ 我有一个摘要页面和一个详细子页面。使用vue-router（v 0.7.x）使用​​如下所示的程序导航实现所有路由： this.$router.go({ path: "/link/to/page" }) 然而，当从摘要页面的子页面我的路线，我需要通过添加打开一个新的选项卡中的子页，就像一个会_target="blank"以一个<a>标签。 有没有办法做到这一点？

97 javascript  vue.js  vue-router 

我有一个有助于过滤数据的功能。我在v-on:change用户更改选择内容时使用，但我甚至需要在用户选择数据之前调用该函数。我已经对AngularJS以前的使用做过同样的事情，ng-init但我知道在vue.js 这是我的功能： getUnits: function () { var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status}; this.$http.post('/admin/units', input).then(function (response) { console.log(response.data); this.units = response.data; }, function (response) { console.log(response) }); } 在blade文件中，我使用刀片表单来执行过滤器： <div class="large-2 columns"> {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!} </div> <div class="large-3 columns"> …

96 javascript  vue.js  vuejs2 

我想将所有与服务器通信并将函数获取数据的功能放入VueJS中的单个可重用文件中。 插件似乎并不是最好的选择。模板较少的组件..？

95 service  vue.js  vuejs2 

var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) …

95 javascript  vue.js  vuejs2  vue-component 

我正在使用Vue.js创建一个表，我想onClick为每个通过的行定义一个事件contactID。这是代码： <tr v-for="item in items" class="static" v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }" @click="addToCount('{item.contactID}')" > <td>{{item.contactName}}</td> <td>{{item.recipient}}</td> </tr> 在单击一行时，它正在调用addToCount()，这是有效的。我想传递item.contactID给addToCount()。有人可以为此建议正确的语法吗？

94 vue.js 

我正在努力了解如何在vue.js中的组件之间传递数据。我已经通读了几次文档，并查看了许多与Vue相关的问题和教程，但我仍然不明白。 为了解决这个问题，我希望得到帮助，以完成一个非常简单的示例 显示一个组件中的用户列表（完成） 单击（完成）链接后，将用户数据发送到新组件-请参阅底部的更新。 编辑用户数据并将其发送回原始组件（到目前为止尚未实现） 这是一个小提琴，在第二步失败：https : //jsfiddle.net/retrogradeMT/d1a8hps0/ 我了解我需要使用道具将数据传递到新组件，但是我不确定如何在功能上做到这一点。如何将数据绑定到新组件？ HTML： <div id="page-content"> <router-view></router-view> </div> <template id="userBlock" > <ul> <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a> </li> </ul> </template> <template id="newtemp" :name ="{{user.name}}"> <form> <label>Name: </label><input v-model="name"> <input type="submit" value="Submit"> </form> </template> 主要组件的js： Vue.component('app-page', { …

92 javascript  vue.js 

我是Vuejs的新手。做了些什么，但我不知道这是简单/正确的方法。 我想要的是 我想要数组中的一些日期，并在事件中更新它们。首先，我尝试了Vue.set，但没有成功。现在，在更改我的数组项之后： this.items[index] = val; this.items.push(); 我没有将push（）推送到数组，而是将其更新。。但是有时最后一项会被隐藏，以某种方式...我认为此解决方案有点不可靠，如何使其稳定？ 简单的代码在这里： new Vue({ el: '#app', data: { f: 'DD-MM-YYYY', items: [ "10-03-2017", "12-03-2017" ] }, methods: { cha: function(index, item, what, count) { console.log(item + " index > " + index); val = moment(this.items[index], this.f).add(count, what).format(this.f); this.items[index] = val; this.items.push(); console.log("arr length: …

92 javascript  vue.js  momentjs  vuejs2 

我使用创建了一个vue webpack项目vue-cli。 vue init webpack myproject 然后在dev模式下运行项目： npm run dev 我收到此错误： 加载资源失败：服务器响应状态为404（未找到）http：// localhost：8080 / favicon.ico 那么在webpack中，如何favicon.ico正确导入？

91 html  ecmascript-6  webpack  vue.js  favicon 

我有一个带有一组特定的起始数据的组件： data: function (){ return { modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue' submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes' addressToConfirm: null, bestViewedByTheseBounds: null, location:{ name: null, address: null, position: null } } 这是模态窗口的数据，因此当它显示我希望它以该数据开始时。如果用户从窗口取消，我想将所有数据重置为此。 我知道我可以创建一种方法来重置数据，只需手动将所有数据属性设置回其原始状态即可： reset: function (){ this.modalBodyDisplay = 'getUserInput'; this.submitButtonText = 'Lookup'; this.addressToConfirm = null; this.bestViewedByTheseBounds = null; …

91 javascript  mvvm  vue.js