Vuejs change prop value in component from instance

Question

I want to Change the prop value in a vue component from my vue instance.

So that I can use the title value inside my component.

The component:

<template>
    <vue-dropzone ref="uploadDropzone" id="dropzone" :options="dropzoneOptions" :title="title"></vue-dropzone>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'

export default {
    name: 'app',

    components: {
        vueDropzone: vue2Dropzone
    },

    props: ['title'], // title shall update so that I can use the value as a param below

    data () {
        return {
            dropzoneOptions: {
                method: 'post',
                title: this.title
            }
        }
    },
}
</script>

The instance in which I Change the title value:

Vue.component('vue-dropzone', require('./components/ImageDropzoneComponent.vue'));

const app = new Vue({
    el: '#app',

    data: {
        title: '',
    },

    methods: {
        foo (e) {
            console.log(this.title); // has correct value but how to pass to vue component (prop)
        },
    }
});


<vue-dropzone ref="uploadDropzone" :title="title"></vue-dropzone>

Show the template that the "instance in which I Change the title value" uses. — acdcjunior
– acdcjunior, Commented Mar 10, 2018 at 16:52
I see. Your code seems fine. What did you expect that is not happening? — acdcjunior
– acdcjunior, Commented Mar 10, 2018 at 19:27
@acdcjunior I want to pass the title from the instance to the component — tigerel
– tigerel, Commented Mar 10, 2018 at 19:52

tony19 · Accepted Answer · 2022-07-15 02:52:02Z

1

Consider changing the dropzoneOptions to a computed property, like so.

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'

export default {
    name: 'app',

    components: {
        vueDropzone: vue2Dropzone
    },

    props: ['title'], // title shall update so that I can use the value as a param below

    computed:
        dropZoneOptions() { // dropZoneOptions recomputes when props.title changes
            return {
                method: 'post',
                title: this.title
            }
        }
    },
}

Alternatively, you may consider a watcher and modify the data on a change, but with the original code posted, I believe this may be the best route.

Check out https://v2.vuejs.org/v2/guide/computed.html for info on both computed properties and watchers.

edited Jul 15, 2022 at 2:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 10, 2018 at 19:33

dennythecoder

8226 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dennythecoder Over a year ago

Does it not work for you? I do not have access to your project. There are dependencies in the project that I haven't seen.

tigerel Over a year ago

Are you willing to have a look at the source Code it is not much, just the component and the axios method

acdcjunior Over a year ago

Honestly, what you are proposing here makes no difference from what he has in the question. You just declared an unused const title = this.title variable and didn't use it. this.title was already present, so it would aready trigger the computation.

tigerel Over a year ago

@acdcjunior I Keep getting null in my title I dont get it

dennythecoder Over a year ago

@acdcjunior, good point. Not sure what I was doing with the variable, but the point of switching it to a computed property was to be reactive to changes.

|

Collectives™ on Stack Overflow

Vuejs change prop value in component from instance

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related