Questions tagged «vue.js»

总览 在Vue.js 2.x中，model.sync将不推荐使用。 那么，在Vue.js 2.x中的兄弟组件之间进行通信的正确方法是什么？ 背景 据我了解Vue 2.x，同级通信的首选方法是使用商店或事件总线。 根据Evan（Vue的创建者）的说法： 值得一提的是，“在组件之间传递数据”通常不是一个好主意，因为最终数据流变得不可跟踪且很难调试。 如果一条数据需要由多个组件共享，则首选 全局存储或Vuex。 [ 讨论链接 ] 和： .once并且.sync已弃用。现在，道具总是单向下降。为了在父范围内产生副作用，组件需要显式地声明emit一个事件，而不是依赖于隐式绑定。 因此，Evan 建议使用$emit()和$on()。 顾虑 让我担心的是： 每个store并event具有全球知名度（纠正我，如果我错了）; 为每次次要沟通创建一个新的商店太浪费了； 我想要的是兄弟姐妹组件的某种范围 events或stores可见性。（或者也许我不理解上面的想法。） 题 那么，同级组件之间进行通信的正确方法是什么？

112 javascript  vue.js  vuejs2  vue-component  vuex 

我有一个称为people包含对象的数组，如下所示： 之前 [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 32}, {id: 2, name: 'Joe', age: 38} ] 它可以更改： 后 [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 33}, {id: 2, name: 'Joe', age: 38} ] 请注意，弗兰克刚满33岁。 我有一个应用程序，我试图在其中查看人员数组，并且当任何值更改时，然后记录更改： <style> input { display: …

108 javascript  vue.js  vuejs2 

我有一个带有表单验证的组件。这是一个多步骤结帐表格。下面的代码是第一步。我想验证用户是否输入了一些文本，将其名称存储在全局状态下，然后发送至下一步。我正在使用vee-validate和vuex <template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> <span class="icon is-small is-right" v-if="errors.has('name')"> <i class="fa fa-warning"></i> </span> </div> <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> </div> <div class="field pull-right"> <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next …

108 vue.js  vuejs2  vue-component  vuex 

首先，我想对Vue来说是新手，这是我有史以来第一个使用Vue的项目。我有组合框，我想根据所选组合框做一些不同的事情。我使用单独的vue.html和打字稿文件。这是我的代码。 <select name="LeaveType" @change="onChange()" class="form-control"> <option value="1">Annual Leave/ Off-Day</option> <option value="2">On Demand Leave</option> </select> 这是我的ts文件 onChange(value) { console.log(value); } 如何在我的打字稿功能中获取选定的选项值？谢谢。

108 javascript  html  asp.net-mvc  vue.js 

如何重复v-forX次（例如10次）循环？ // want to repeat this (e.g.) 10 times <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> 该文档显示： <ul> <li v-for="item in 10">{{ item }}</li> </ul> // or <li v-for="n in 10">{{ n }} </li> // this doesn't work <li v-for="item in 10">{{ item.price …

107 javascript  vue.js  vuejs2  v-for 

我要访问state.session的instance.js从records_view.js。这是如何完成的？ 商店/模块/instance.js const state = { // This is what I want to access in records_view.js session: {} }; const getters = { sessionGetter: state => state.session }; 商店/模块/records_view.js const actions = { getSettingsAction (context, props) { // This is how I'm trying to access session, which doesn't work let …

107 javascript  vue.js  vuex 

我有一个动态的观点： <div id="myview"> <div :is="currentComponent"></div> </div> 与关联的Vue实例： new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); 这使我可以动态更改组件。 就我而言，我有三个不同的部分组成：myComponent，myComponent1，和myComponent2。我像这样在它们之间切换： Vue.component('myComponent', { template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>" } 现在，我想将道具传递给myComponent1。 将组件类型更改为时，如何传递这些道具myComponent1？

105 javascript  vue.js  vuejs2  vue-component 

我想将Vue.js变量与图片网址连接起来。 我计算了什么： imgPreUrl : function() { if (androidBuild) return "android_asset/www/"; else return ""; } 如果我为Android构建： <img src="/android_asset/www/img/logo.png"> 其他 <img src="img/logo.png"> 如何将计算出的变量与URL连接起来？ 我尝试过这个： <img src="{{imgPreUrl}}img/logo.png">

105 javascript  vue.js  vuejs2 

我需要以两种方式路由到某个组件-一种带有参数，一种不带参数。我已经搜索了可选的参数，但是却找不到很多信息。 所以我的路线： { path: '/offers/:member', component: Offers, name: 'offers', props: true, meta: { guest: false, needsAuth: true } }, 当我以编程方式用参数调用它时，一切都很好 this.$router.push({ path: /offers/1234 }); 但是我也需要像这样通过导航 <router-link to="/offers">Offers</router-link> 该offers组件接受的丙 props: ['member'], 和这样使用的组件 <Offers :offers="data" :member="member"></Offers> 现在，我设法使其工作的丑陋方法是复制路线，并使其中一个不采取支撑措施： { path: '/offers', component: Offers, name: 'offers', props: false, meta: { guest: false, needsAuth: true …

105 vue.js 

我的应用程序使用Firebase API进行用户身份验证，将登录状态另存为Vuex状态中的布尔值。 当用户登录时，我设置了登录状态并相应地显示“登录/注销”按钮。 但是刷新页面后，vue应用程序的状态将丢失并重置为默认状态 这会导致出现问题，因为即使用户登录并刷新页面，登录状态也将被设置为false，即使用户保持登录状态，也会显示登录按钮而不是退出按钮。 我应该怎么做才能防止这种行为 我应该使用Cookie 还是可以使用其他更好的解决方案... --

105 vue.js  vuejs2  state  vuex 

将鼠标悬停在vue.js中的元素上时，我想显示一个div。但是我似乎无法正常工作。 似乎vue.js中没有悬停或鼠标悬停的事件。这是真的吗？ 是否可以结合使用jquery悬停和vue方法？

104 javascript  vue.js 

如何在Vue-cli项目中更改端口号，以使其在另一个端口而不是8080上运行。

104 vue.js  vuejs2  command-line-interface  vue-cli 

我阅读了文档，但我听不懂。我知道哪些数据可以计算，监视，执行方法，但是nextTick()在vuejs中有什么用？

104 vue.js  vuejs2 

题： 如何在单个@click中调用多个功能？（又名v-on:click）？ 我试过了 拆分功能用分号：<div @click="fn1('foo');fn2('bar')"> </div>; 使用几个@click：<div @click="fn1('foo')" @click="fn2('bar')"> </div>; 但是如何正确地做呢？ PS：当然，我总是可以做到的 <div v-on:click="fn3('foo', 'bar')"> </div> function fn3 (args) { fn1(args); fn2(args); } 但是有时候这不是很好。

101 javascript  vue.js 

我在此拉取请求中看到： 添加一个 router.reload() 重新加载当前路径并再次调用数据挂钩 但是，当我尝试从Vue组件发出以下命令时： this.$router.reload() 我收到此错误： Uncaught TypeError: this.$router.reload is not a function 我搜索了docs，但没有找到任何相关内容。vue / vue-router是否提供某些这样的功能？ 我感兴趣的软件版本是： "vue": "^2.1.0", "vue-router": "^2.0.3", PS。我知道这location.reload()是替代方法之一，但我正在寻找本机Vue选项。

101 vue.js  vue-router  vuejs2