How to override default values of a vuejs component?

Question

I've implemented a VUEJS plugin (via CDN) and it works, but I cannot change the default props.. any idea how to change the defaults?

In the code below you can see my attempt to accomplish this

html:

<tags-dic element-id="tags" v-model="selectedTags" :typeahead="true"></tags-input>

<script src="https://cdn.jsdelivr.net/npm/@voerro/[email protected]/dist/voerro-vue-tagsinput.js"></script>

vue/javascript:

<script type="text/javascript">

            var app = new Vue({
                el: '#searchapp',
                components: {  "tags-dic": VoerroTagsInput },

                data: {
                    query: "",
                    typeahead: true,
                    placeholder: 'Add a new tag',
                    limit: 1,
                    onlyExistingTags: true,
                    existingTags: [
                         'DNA',
                         'RNA',
                         'Protein',
                                ],
                    selectedTags: [], 

                },
                methods: {
                    submit: function() {
                        console.log("clicked");
                        if (this.query) {

                            console.log("OK");

                        }
                    }
                }
            })


        </script>

Thanks

Changed the name of the question since vue-tagsinput is a component, not a plugin — Stephen Thomas
– Stephen Thomas, Commented Mar 31, 2019 at 19:36
And which default properties are you trying to change? stackoverflow.com/help/mcve — stdob--
– stdob--, Commented Mar 31, 2019 at 19:38
attempting to change the props, as seen in the example (e.g. placeholder, typeahead..) — Roy Granit
– Roy Granit, Commented Mar 31, 2019 at 19:42

Stephen Thomas · Accepted Answer · 2019-03-31 19:39:28Z

1

You can supply your own property values in the template. (See the docs for details.)

<tags-dic 
    element-id="tags" 
    v-model="selectedTags" 
    :typeahead="true"
    :existing-tags="existingTags"
    :placeholder="placeholder"
/>

and so on

answered Mar 31, 2019 at 19:39

Stephen Thomas

14.1k2 gold badges35 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

How to override default values of a vuejs component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related