CODEWITHSUNDEEP
javascriptvue.jsvue-componentquasar-framework
mamcx
mamcx

Reputation: 16196

How pass a v-model on the parent into a template

I'm trying to compose the UI for a search page, but wanna use components to reuse code. However, I need a way to pass the model of the page to the search component, and don't see how:

In index.html:

<template id="search">
  <q-search inverted placeholder="Look" float-label="Search" v-model="search" /> <-- BIND HERE
</template>

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <search v-model="search"></search> <-- HOW PASS INTO THIS
  </q-layout-header>
</q-layout>
</template>

And the code:

const search = {
  template: '#search',
  props: ['search']
};

const ListCustomersPage = {
  key: 'ListCustomersPage',
  template: '#ListCustomersPage',
  components: { search },
  data() {
    return {
      title: 'Select Customer',
      search:''  <-- FROM THIS TO 'BIND HERE'
    }
  }
};

Upvotes: 1

Views: 58

Answers (1)

Michael MacDonald
Michael MacDonald

Reputation: 433

I'm not sure if I'm 100% following what you're asking, but it seems like you just want to pass a property to a child component?

<search :search="search"></search> <-- HOW PASS THIS

Passing a prop to a child is done with v-bind or the colon short hand for it.

<child-component :property="parent_data"></child-component>

<child-component v-bind:property="parent_data"></child-component>

See the documentation here.

Upvotes: 1

Related Questions