Tag: vue.js

将数据传递给vue.js中的组件: 我正在努力了解如何在vue.js中的组件之间传递数据。我已经多次阅读文档，看了很多与vue相关的问题和教程，但是我仍然没有得到它。为了包围我的头，我希望帮助完成一个非常简单的例子显示一个组件中的用户列表（完成）当点击链接（完成）时，将用户数据发送到新组件 – 请参阅底部的更新。编辑用户数据并将其发送回原始组件（还没有到此为止）这是一个小提琴，第二步失败： https : //jsfiddle.net/retrogradeMT/d1a8hps0/ 我明白，我需要使用道具来传递数据到新的组件，但我不知道如何在function上做到这一点。如何将数据绑定到新组件？ 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', { […]

Vuejs – 隐藏页面加载时的vuejs语法: 也许这是一个微不足道的问题。所以，当我在浏览器上运行我的vuejs应用程序，并启用节stream下载速度（设置为低连接）。我在浏览器中输出了未完成的vue语法输出。我知道我们可以在整个页面加载之前显示加载图片的技巧，但它有什么最好的解决scheme来解决这个问题？

在使用Webpack的vue.js项目中使用（'@'）loginES6导入path: 我开始了一个新的vue.js项目，所以我使用vue-cli工具来构build一个新的webpack项目（即vue init webpack ）。当我走过生成的文件，我注意到在src/router/index.js文件中的以下导入： import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) 我之前没有看到路标（ @ ）。我怀疑它允许相对path（也许？），但我想确定我明白它真正的作用。我试图在网上search，但无法find解释（因为search“在符号”或使用文字字符@没有帮助作为search条件）。 @在这条路上做什么（链接到文档将是太棒了），这是一个es6的东西？一个webpack的东西？一个vue加载器的东西？ UPDATE 感谢Felix Kling将我指向另一个关于同一个问题的重复的stackoverflow问题/回答。 […]

从组件外部调用Vue JS组件方法: 比方说，我有一个主要的Vue实例有子组件。有没有办法从Vue实例之外完全调用属于这些组件之一的方法？这里是一个例子： var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my-component'].increaseCount(); // This doesn't work }); <script src="http://vuejs.org/js/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> <my-component></my-component> <br> <button id="external-button">External Button</button> […]

vue.js有条件地禁止input: 我有一个input <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> 在我的Vue.js组件中，我确实有， .. .. ready() { this.form.name = this.store.name; this.form.validated = this.store.validated; }, .. validated为boolean 0或1 ，但不pipe数据库中存储了什么值，我的input总是被禁用如果input为false，则需要禁用input，否则可编辑更新：这样做总是使input（不pipe我在数据库中有0或1） <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> 这样做总是禁用input（不pipe我在数据库中有0还是1） <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">

Vue显示未转义的HTML: 我怎样才能设法得到一个小胡子绑定HTML解释？此刻rest（ <br /> ）只是显示/转义。小vue应用程序 var logapp = new Vue({ el: '#logapp', data: { title: 'Logs', logs: [ { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 }, { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 } ] } }) 这里是模板 <div id="logapp"> <table> <tbody> <tr v-repeat="logs"> […]

：找不到元素: 我正在使用Vuejs 。这是我的标记： <body> <div id="main"> <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> </div> </body> 这是我的代码： var main = new Vue({ el: '#main', data: { currentActivity: 'home' } }) ; 当我加载页面时，我得到这个警告： [Vue warn]: Cannot find element: #main 我究竟做错了什么？

如何从url中删除hashbang？: 如何删除hashbang #! 从url？我发现在vue路由器文档中禁用hashbang的选项（ http://vuejs.github.io/vue-router/en/options.html ），但是这个选项删除了#! 只是把# 有什么办法可以有干净的url吗？例： NOT： #!/home 但是： /home

VueJS：为什么“这个”是未定义的？: 我正在用Vue.js创build一个组件。当我在任何生命周期钩子（ created ， mounted ， updated等）中引用this时，它的计算结果为undefined ： mounted: () => { console.log(this); // logs "undefined" }, 同样的事情也发生在我的计算属性： computed: { foo: () => { return this.bar + 1; } } 我得到以下错误： Uncaught TypeError：无法读取未定义的属性“bar” 为什么this评估在这些情况下是undefined ？