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.