Vuejs change component element value dynamicaly

Question

I have a component in common between two other components A,B. This shared Comp has a button and its name changes depending on the component i use. How do I set the name dynamic? I thought v-model solved the problem What am I missing?

App.vue:

    <test-a></test-a>
    <test-b></test-b>

sharedComp.vue:

    <template>
      <div>
        {{ btnValue }}
        <input type="button" v-model="btnValue" />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          btnValue: "",
        };
      },
    };
    </script>

CompA.vue

    <template>
      <div>
        <shared-comp
          v-for="(item, index) in 3"
          :key="index"
          :value="'A'"
        ></shared-comp>
      </div>
    </template>
    
    <script>
    import SharedComp from "./SharedComp.vue";
    export default {
      components: { SharedComp },
    };
    </script>

CompB.vue

    <template>
      <div>
        <shared-comp :value="'B'"></shared-comp>
      </div>
    </template>
    
    <script>
    import SharedComp from "./SharedComp.vue";
    export default {
      components: { SharedComp },
    };
    </script>

tony19 · Accepted Answer · 2022-07-15 01:43:15Z

2

You have to define the properties you pass to your component inside of the 'sharedComp'.

Try something like:

    <template>
      <div>
        {{ value }}
        <input type="button" v-model="value" />
      </div>
    </template>
    
    <script>
    export default {
       props: ['value'],
    };
    </script>

For further information on Props in Vue check the documentation page: https://v2.vuejs.org/v2/guide/components-props.html

edited Jul 15, 2022 at 1:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 16, 2021 at 11:44

Joker

871 gold badge2 silver badges7 bronze badges

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

1 Comment

Eden M Over a year ago

,tnx! added:props: ["value"],, btnValue: this.value,

Collectives™ on Stack Overflow

Vuejs change component element value dynamicaly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related