Vue 2 Change search placeholder and search id on parent component

Question

So, I have this search component I created because I will use it several time.

My search Component (Child Component) looks like:

<template>
  <div class="input-group main-search">
    <input class="input-group-field" type="text" value="" :placeholder="placeholder" :id="searchId">
    <div class="input-group-button">
      <input type="submit" class="button" value="Search">
    </div>
  </div>
</template>

<script>

export default {
  props: ['placeholder', 'searchId'],
  name: 'search',
  data() {
    return {
    };
  },
};
</script>

and I included it into my Parent component (Search pages with Categories) the below example works for me... but I want to make it somehow possible to get data from returned data in this component and somehow to bind into.

<template>
  <search placeholder="placeholder text" id="id number"></search>
  <p>some text here </p>
</template>

So is there any form passing data from returned data like:

  data() {
    return {
      searchProps: [
        {
          placeholder: 'Watafaka',
          searchId: '2',
        },
      ],

Looking forward for help from someone :)

Answer 1

You have to pass the values by binding them. Check the below answer.

<template>
   <search :placeholder="placeholderValue" :searchId="searchId"></search>
   <p>some text here </p>
</template>

data() {
   return {
       placeholderValue: 'Watafaka',
       searchId: '2'
   }
}