vue-component

My first component like this : <template> ... </template> <script> export default { ... methods: { addPhoto() { const data = { id_product: this.idProduct} const item = this.idImage this.$store.dispatch('addImage', data) .then((response) => { this.createImage(item, response) }); }, } } </script> If the method addPhoto called, it will call ajax and then it will get response ajax I want to send response ajax and another parameter to method createImage. Method createImage is located in other component (second component) My second component like this : <template> <div> <ul class="list-inline list

I want to contribute to a project - it's written in Vue, and I am a beginner in Vue. I have two components - Setup and MainApp Both will need to update some state based on different messages from the websocket. Some websocket messages will affect the former, some the latter. Vue doesn't know services, so I thought I'd just create a custom component, with empty <template> . instantiate the websocket there and then issue an this.emit() every time a new message occurs in the listener. Both other components would listen to the emits and would be able to react. Unfortunately, I can't get the

I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning. <template> <div> <b-form-input v-model="value" @change="postPost()"></b-form-input> </div> </template> <script> import axios from 'axios'; export default { props: { value: String }, methods: { postPost() { axios.put('/trajectory/inclination', { body: this.value }) .then(response => { }) .catch(e => { this.errors.push(e) }) } } } </script> The warning says: "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or

Well, I'm trying to change a value of "variable" in Vue, but when I click on the button they throw a message in console: [Vue warn]: 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: "menuOpen" I have no idea how to solve this problem... My file.vue: <template> <button v-on:click="changeValue()">ALTERAR</button> </template> <script> export default { name: 'layout', props: [ 'menuOpen' ], methods: { changeValue: function () { this.menuOpen = !this

We have a component in Vue which is a frame, scaled to the window size, which contains (in a <slot> ) an element (typically <img> or <canvas> ) which it scales to fit the frame and enables pan and zoom on that element. The component needs to react when the element changes. The only way we can see to do it is for the parent to prod the component when that happens, however it would be much nicer if the component could automatically detect when the <slot> element changes and react accordingly. Is there a way to do this? To my knowledge, Vue does not provide a way to do this. However here are two

For a VueJS 2.0 project I have the following on the parent component <template> <child></child> <button @click="$emit('childEvent)"></button> </template> on the child component I have: { events: { 'childEvent' : function(){.... }, ready() { this.$on('childEvent',...) }, methods: { childEvent() {....} } } Nothing seems to work on button click. Is it that I need to create a parent method that would then emit to the child? I was using vuejs 1. but now I'm confused as to the ways parent to child communications work While the other answers are correct and it is usually possible to use a data driven

My component is like this : <template> ... <input type="text" class="form-control" v-model="rawFilter" placeholder="Search" @keyup="getPlayers"> ... </template> <script> import _ from 'lodash' ... export default { ... data() { return{ msg:'hello vue', rawFilter:'', loading:false } }, ... methods: { getPlayers: _.debounce(function(e) { const text = e.target.value.trim() this.$store.dispatch('getPlayers', { q: text }) },1000), ... } } </script> When I searching, before display the data, I want add a loading icon How can I do it in vue.js 2? For usability's sake, I'll suggest using a loader which

In VueJS, I have seen different ways of accessing parent properties from a component. Say I want to use the parent property items in my component. First way The component has a props value bound to a parent property: .js Vue.component("example", { template: "<div></div>", props: ["myItems"] }); .html <example v-bind:my-items="items"></example> Second Way The child component accesses a parent's properties directly, like this: this.$parent.items Question Is there a reason to use the more elaborate first method over the second? Is there an overhead to "duplicating" data like that, vs. accessing