Questions tagged «vuejs2»

在VueJS中，我们可以使用v-if添加或删除DOM元素： <button v-if="isRequired">Important Button</button> 但是有一种方法可以添加/删除dom元素的属性，例如针对以下条件设置所需属性： Username: <input type="text" name="username" required> 通过类似于： Username: <input type="text" name="username" v-if="name.required" required> 有任何想法吗？

119 javascript  vue.js  vuejs2 

总览 在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 

如何重复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 

我有一个动态的观点： <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 

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

105 vue.js  vuejs2  state  vuex 

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

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

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

104 vue.js  vuejs2 

考虑一个简单的Vue博客： 我正在使用Vuex作为数据存储，我需要设置两个getter：一个getPost用于post通过ID检索ID的getter ，以及一个listFeaturedPosts用于返回每个精选文章的前几个字符的getter 。特色帖子列表的数据存储架构通过其ID引用帖子。为了显示摘录，这些ID必须解析为实际帖子。 store / state.js export const state = { featuredPosts: [2, 0], posts: [ 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', ] } store …

104 vuejs2  vuex 

我在此拉取请求中看到： 添加一个 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 

我的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 

我有一个有助于过滤数据的功能。我在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