CODEWITHSUNDEEP
vue.jsvuejs3
Ozan Mudul
Ozan Mudul

Reputation: 1010

component does not update upon prop change

I am new to vue and a bit unaware of concepts.

I am trying to implement a reusable tab that I found on the internet and also using CDN instead of CLI for certain reasons. My vue version is v3.2.36

I am mostly using react but also curious about vuejs and wanted to learn more however instead of reading documents I like to dive into code and try to implement things myself by reading online, but mostly I saw people writing solutions on v2 instead of v3

Also would you please guide me if any of my code have better practices?

my tabs component:

export default {
    data() {
        return { tabs: [] };
    },

    mounted() {
        this.tabs = this.$slots.default();

    },

    methods: {
        selectTab(selectedTab) {
            this.tabs.forEach(tab => {
                console.log(tab)

                tab.isActive = (tab.props.name == selectedTab.props.name);
                tab.test = "test aktif"
            });
        }
    },
    template: `
        <div>
            <div class="tabs">
            <ul>
                <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
                    <a :href="tab.href" @click="selectTab(tab)">{{ tab.props.name }}</a>
                </li>
            </ul>
            </div>

            <div class="tabs-details">
                <slot></slot>
            </div>
        </div>

        
    `
}

my tab component

export default {
    props: {
        name: { required: true },
        selected: { default: false },
        test: ""
    },

    data() {

        return {
            isActive: false
        };

    },

    computed: {

        href() {
            return '#' + this.name.toLowerCase().replace(/ /g, '-');
        }
    },

    mounted() {
        console.log("test")
        this.isActive = this.selected;

    },
    updated() {
        console.log("updated")
    },
    template: `
    <div>{{isActive}}
    <div v-show="isActive"><slot></slot></div>
    </div>
    `
}

my html :

<tabs>
  <tab name="Services" :selected="true">
    <h1>What we do</h1>
  </tab>
  <tab name="Pricing">
    <h1>How much we do it for</h1>
  </tab>
  <tab name="About Us">
    <h1>Why we do it</h1>
  </tab>
</tabs>

Upvotes: 0

Views: 328

Answers (1)

user1579234
user1579234

Reputation: 501

the props initialization had some issues

use

test: { default: "" },

instead of test: ""

you can find the fixed version here: https://codesandbox.io/s/old-pond-opqg4v?file=/src/components/Tab.vue

Upvotes: 1

Related Questions