CODEWITHSUNDEEP
vue.js
Tiziano
Tiziano

Reputation: 346

Pass data to vue component

i'm learning Vue.js right now, but i have a little problem on understanding a quite easy task ( maybe my idea of programming is too old ).
i've created a little component with this code.

<template>
    <div class="tabSelectorRoot">
        <ul>
            <li v-for="(element,index) in elements" v-on:click="changeSelected(index)">
                <a :class="{ 'selected': activeIndex === index }" :data-value="element.value"> {{ element.text }}</a>
            </li>
        </ul>
        <div class="indicator"></div>
    </div>
</template>

<script>
    export default {
        name: "TabSelectorComponent",
        data () {
            return {
                activeIndex : 0,
                elements: [
                    { 'text':'Images', 'value': 'immagini','selected':true},
                    { 'text':'WallArts', 'value': 'wallart'}
                ]
            }
        },
        created: function () {
        },
        methods: {
            'changeSelected' : function( index,evt) {
                if ( index == this.activeIndex) { return; }
                this.activeIndex = index;
                document.querySelector('.indicator').style.left= 90 * index +'px';
                this.$emit('tabSelector:nameChanged',)
            }
        }
    }
</script>

and this is the root 

<template>
  <div id="app">
    <tab-selector-component></tab-selector-component>
  </div>
</template>

<script>
import TabSelectorComponent from "./TabSelectorComponent";
export default {
    name: 'app',
    components: {TabSelectorComponent},
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    'mounted' : function() {
        console.log(this)
        //EventManager.eventify(this,window.eventManager);
        /*this.register('tabSelector:changeValue',function(el){
            console.log(el);
        });*/
    }
}
</script>

All of this renders in something like this
enter image description here
I'd like to reuse the component by varying the number of objects inside the list but i cannot understand how to accomplish this simple task

Upvotes: 2

Views: 359

Answers (1)

Bert
Bert

Reputation: 82489

The basic way to communicate between components in Vue is using properties and events. In your case, what you would want to do is add an elements property to your TabSelectorComponent that is set by the parent.

TabSelectorComponent

export default {
  name: "TabSelectorComponent",
  props: ["elements"],
  data () {
    return {
      activeIndex : 0
    }
  },
  ...
}

In your parent:

<tab-selector-component :elements="elementArray"></tab-selector-component>

This is covered in the documentation here.

Upvotes: 1

Related Questions