How to get data from a component in VueJS

Question

I have the following component:

Component

<template>
<div>
  <label class="typo__label">Single selecter</label>
  <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
</div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
}
</script>

I am using it in my page like so:

<p id="app-two">
  <dropdown></dropdown>
  @{{ value }}
  @{{ message }}
</p>

<script>
    new Vue({
    el: '#app',
    data: {
        message: 'Test message'
    }
});
</script>

When I run the page, @{{ message }} shows "test message" but @{{ value }} is blank. I can see the value of the dropdown component getting updated in VueJS Dev Tools but it does not show on the page. How do I access the components data in my vue element? Something like @{{ dropdown.value }}

Yevhenii Kosmak · Accepted Answer · 2024-10-08 19:48:10Z

3

<template>
    <div>
      <label class="typo__label">Single selecter</label>
      <multiselect v-model="internalValue" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value">  </multiselect>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect'

    export default {
      components: {
        Multiselect
      },
      props: ['value'],
      data () {
        return {
          internalValue: this.value,
          options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
        }
      },
      watch:{
         internalValue(v){
             this.$emit('input', v);
         }
      }
    }
</script>

and in your page

<p id="app-two">
  <dropdown v-model="selectedValue"></dropdown>
  @{{ selectedValue}}
  @{{ message }}
</p>

<script>
    new Vue({
    el: '#app',
    data: {
        selectedValue: null
        message: 'Test message'
    }
});
</script>

Here is an example, not using multi-select, but a custom component that implements support for v-model.

edited Oct 8, 2024 at 19:48

Yevhenii Kosmak

3,8802 gold badges13 silver badges29 bronze badges

answered Mar 9, 2017 at 1:52

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

3 Comments

Clinton Green Over a year ago

Hi that does not get the data from the components. I think I need to use props but I can't figure out how it would work here. Thanks

Bert Over a year ago

@ClintonGreen I misread your code. It looks like you are wrapping the multiselect in your own custom component? In that case you probably want to implement v-model support in your component, or, you could just emit the value.

Bert Over a year ago

@ClintonGreen updated the example to implement v-model for a custom component.

kesm0 · Accepted Answer · 2020-05-27 20:55:43Z

This is the best and cleanest way for me.

Parent component

<template>
    <ChildComponent v-model="selected" />
</template>

Child component

<template>
    <Multiselect
        :value="value"
        :options="options"
        :show-labels="false"
        :multiple="true"
        :close-on-select="false"
        :clear-on-select="false"
        :searchable="false"
        :limit="1"
        :limit-text="(count) => $t('app.multiselect.and_n_more', { n: count })"
        :placeholder="$t('app.select')"
        label="name"
        track-by="name"
        @input="$emit('input', $event)"
    />
</template>

<script>    
export default {
    props: {
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            options: [{id:1, name:'John'}, {id:2, name:'Tom'}]
        }
    }
}
</script>

Collectives™ on Stack Overflow

How to get data from a component in VueJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related