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>

Answer 1

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