How can I pass parameters from vue custom element to a vue component?

Question

I don't have a whole vue app, so I use custom elements to replace some elements that should be handled with vue.

I simply want to use the vue multiselect plugin in a html file.

So I tried the following:

index.ts

import Vue from "vue"
import VueCustomElement from 'vue-custom-element'
import Autocomplete from "./vue/autocomplete.vue"

Vue.use(VueCustomElement);
Vue.customElement('auto-complete', Autocomplete);

test.html

<auto-complete
        v-model="value"
        :options="options"
        placeholder="test"
        @search-change="getData"
>
</auto-complete>

test.vue

<template>
    <multiselect v-model="value" :options="options" @search-change="getData"></multiselect>
</template>

<script type="ts">
    const Multiselect = require('vue-multiselect').default

    export default {
        components: { Multiselect },
        data () {
            return {
                value: 'test',
                options: ['list', 'of', 'options']
            }
        },
        methods: {
            getData (query) {
                console.log(123)
            }
        }
    }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

In the output the data of the custom element is always ignored and only the parameters in the part in the .vue file is used.

How can i achieve that the parameters like placeholder or @search-change are used from the custom element?

Remember that :options="options" and @search-change won't work in regular HTML as this are Vue specific solutions. — karolf
– karolf, Commented Apr 6, 2018 at 8:10

Shubham Patel · Accepted Answer · 2018-04-06 06:36:00Z

1

I am also using vue-custom-elements in one of my projects.

You are passing option as props so you need to add it as a prop in your autocomplete.vue.

<template>
    <multiselect v-model="value" :options="options" @search-change="getData"></multiselect>
</template>

<script type="ts">
    const Multiselect = require('vue-multiselect').default

    export default {
        props: ['options'],
        components: { Multiselect },
        data () {
            return {
                value: 'test'
            }
        },
        methods: {
            getData (query) {
                console.log('123')
            }
        }
    }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

answered Apr 6, 2018 at 6:36

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How can I pass parameters from vue custom element to a vue 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