Questions tagged «vue-component»

组件是Vue的强大功能,它允许扩展基本HTML元素以封装可重用的代码。

9
Vue.js-如何正确监视嵌套数据
我正在尝试了解如何正确观察道具的一些变化。我有一个父组件(.vue文件),该组件从ajax调用接收数据,将数据放入对象中,并通过v-for指令使用它来呈现某些子组件,以下是我的实现的简化: <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ...然后在<script>标签内: data(){ return { players: {} }, created(){ let self = this; this.$http.get('../serv/config/player.php').then((response) => { let pls = response.body; for (let p in pls) { self.$set(self.players, p, pls[p]); } }); } 项目对象是这样的: item:{ prop: value, …

13
如何聆听“道具”的变化
在VueJs 2.0文档中,我找不到任何可以监听props更改的钩子。 VueJ是否具有类似onPropsUpdated()或类似的钩子? 更新资料 正如@wostex所建议的,我尝试进入watch我的财产,但没有任何变化。然后我意识到我有一个特殊情况: <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> 我myProp将父组件接收到的child组件传递给了我。然后,watch: {myProp: ...}它不起作用。

7
Vue v-on:click在组件上不起作用
我正在尝试在组件内部使用on click指令,但它似乎不起作用。当我单击该组件时,应该在控制台中单击“测试”,什么也没有发生。我在控制台中看不到任何错误,所以我不知道我在做什么错。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 应用程序 <template> <div id="app"> <test v-on:click="testFunction"></test> </div> </template> <script> import Test from './components/Test' export default { name: 'app', methods: { testFunction: function (event) { console.log('test clicked') …

13
vuejs从子组件更新父数据
我开始玩vuejs(2.0)。我构建了一个包含一个组件的简单页面。该页面具有一个带有数据的Vue实例。在该页面上,我注册了该组件并将其添加到html中。该组件有一个input[type=text]。我希望该值反映在父对象(主Vue实例)上。 如何正确更新组件的父数据?从父级传递绑定的道具不好,并且会向控制台发出一些警告。他们的文档中有内容,但是没有用。


2
Vue组件道具的默认值以及如何检查用户是否未设置道具?
1.如何在Vue 2中为组件prop设置默认值?例如,有一个movies可以以这种方式使用的简单组件: <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } 但是,如果用户未指定year: <movies></movies> 则组件将使用yearprop的一些默认值。 2.另外,检查用户是否未设置道具的最佳方法是什么?这是个好方法吗? if (this.year != null) { // do something } 也许这: if (!this.year) { // do something } ?

5
Vue“导出默认”与“新Vue”
我刚刚安装了Vue,并一直按照以下教程使用vue-cli Webpack模板创建项目。创建组件时,我注意到它在以下内容中绑定了我们的数据: export default { name: 'app', data: [] } 而在其他教程中,我看到数据绑定于: new Vue({ el: '#app', data: [] )} 有什么区别,为什么两者之间的语法似乎不同?我在从vue-cli生成的App.vue中使用的标签内部使“新Vue”代码无法正常工作。

6
VueJs 2.0中同级组件之间的通信
总览 在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可见性。(或者也许我不理解上面的想法。) 题 那么,同级组件之间进行通信的正确方法是什么?

4
Vuex-已将计算属性“名称”分配给但没有设置器
我有一个带有表单验证的组件。这是一个多步骤结帐表格。下面的代码是第一步。我想验证用户是否输入了一些文本,将其名称存储在全局状态下,然后发送至下一步。我正在使用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 …

4
将道具动态传递给VueJS中的动态组件
我有一个动态的观点: <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?

6
如何解决属性内插法已删除。使用v-bind或冒号速记?Vue.JS 2
我的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 }, ... …

12
[Vue警告]:属性或方法未在实例上定义,但在渲染期间被引用
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) …

8
如何在Vue组件中格式化货币?
我的Vue组件是这样的: <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> 的结果{{ item.total }}是 26000000 但是我想格式化它是这样的: 26.000.000,00 在jQuery或JavaScript中,我可以做到 但是,如何在vue组件中做到这一点?

8
将全局变量应用于Vuejs
我有一个javascript变量,我想在实例化时将其全局传递给Vue组件,因此每个注册的组件都将其作为属性,或者可以全局访问。 注意:我需要将vuejs的全局变量设置为READ ONLY属性

5
VueJS从父级访问子级组件的数据
我正在将vue-cli支架用于Webpack 我的Vue组件结构/层次结构当前如下所示: 应用程式 PDF模板 背景 动态模板图片 静态模板图片 降价促销 在应用程序级别,我想要一个vuejs组件方法,该方法可以将所有子组件的数据聚合到一个可以发送到服务器的JSON对象中。 有没有办法访问子组件的数据?具体来说,多层深? 如果不是,传递可观察的数据/参数的最佳实践是什么,以便在被子组件修改后可以访问新值?我正在尝试避免组件之间的硬依赖性,因此,到目前为止,使用组件属性传递的唯一内容是初始化值。 更新: 可靠的答案。查看两个答案后,我发现有帮助的资源: Vuex以及何时使用它 适用于小型应用程序的Vuex替代解决方案
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.