vue-component | 易学教程

How to access App.vue from another component?

阅读更多关于 How to access App.vue from another component?

问题 in my app written with VueJs 2, I have into the Vue.app this code: export default { name: 'app', data () { return { title: 'Gestione fornitori', idfornitore: '' } }, methods: { loadFunction (route) { this.$router.push(route) } } } </script> I wish to access the property idfornitore from another component, I've used: mounted () { this.$parent.idfornitore = '' }, or also: mounted () { var Vue = require('vue') Vue.app.idfornitore = '' }, But it didn't worked. Which is the correct way to access

How do I bind a :src for an image in the child component?

阅读更多关于 How do I bind a :src for an image in the child component?

问题 I am attempting to render a list of components. All the data properties are displaying correctly except the img src url. the files/folders are : CryptContent.vue - contains the v-for the component to render assets/ - contains the images The CryptContent.vue contain: <template> <OwnedCardContent v-for="card in allCards" :id="card.id" :name="card.name" :cost="card.cost" :cset="card.cset" :edition_total="card.edition_total" :level="card.card_level" :unlock_czxp="card.unlock_czxp" :buy_czxp="card

Vue.js Changing props

阅读更多关于 Vue.js Changing props

问题 I'm a bit confused about how to change properties inside components, let's say I have the following component: { props: { visible: { type: Boolean, default: true } }, methods: { hide() { this.visible = false; } } } Although it works, it would give the following warning: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" (found in component

How to pass props using slots from parent to child -vuejs

阅读更多关于 How to pass props using slots from parent to child -vuejs

问题 I have a parent component and a child component. The parent component's template uses a slot so that one or more child components can be contained inside the parent. The child component contains a prop called 'signal'. I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value. This seems like it should be something simple, but I cannot figure out how to do this using slots: Here is a running example

Vuex - Computed property “name” was assigned to but it has no setter

阅读更多关于 Vuex - Computed property “name” was assigned to but it has no setter

问题 I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I'd like to validate that the user entered some text, store their name in the global state and then send then to the next step. I am using vee-validate and 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

Passing props dynamically to dynamic component in VueJS

阅读更多关于 Passing props dynamically to dynamic component in VueJS

问题 I've a dynamic view: <div id="myview"> <div :is="currentComponent"></div> </div> with an associated Vue instance: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); This allows me to change my component dynamically. In my case, I have three different components: myComponent , myComponent1 , and myComponent2 . And I switch between them like this: Vue.component('myComponent', { template: "<button @click=\"$parent.currentComponent = 'myComponent1'

Vue.js - How to properly watch for nested data

阅读更多关于 Vue.js - How to properly watch for nested data

问题 I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation: <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... then inside <script> tag: data(){ return { players: {} }, created(){

Vue v-on:click does not work on component

阅读更多关于 Vue v-on:click does not work on component

问题 I'm trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a 'test clicked' in the console. I don't see any errors in the console, so I don't know what am I doing wrong. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div>  </body> </html> App.vue <template> <div id="app"> <test v-on:click=

Global data with VueJs 2

阅读更多关于 Global data with VueJs 2

问题 Im relatively new with VueJS, and I've got no clue about how to make some data globally available. I would like to save data like API endpoints, user data and some other data that is retrieved from the API somewhere where each component can get to this data. I know I can just save this with just vanilla Javascript but I suppose there is a way to do this with VueJS. I may be able to use the event bus system to get the data but I don't know how I can implement this system to my needs. I would

VueJs - Calling methods passed to dynamically created DOM elements

阅读更多关于 VueJs - Calling methods passed to dynamically created DOM elements

问题 In my Vuejs component, i'm populating a datatable dynamically i.e. inside my methods : displayUserTypes(){ axios.get('/antenna-monitor/pull-user-types').then( ({data}) => { for(var i in data) { $('#user-roles').dataTable().fnAddData( [ data[i].name, data[i].description, '<a href="#" title="Edit" @click.prevent="editModal"><i class="fa fa-edit"></i></a> | <a href="#" title="Delete"><i class="fa fa-trash"></i></a>' ]); } }, created() { this.displayUserTypes(); } This is the HTML part of the