problems on creating own components

[donsherman]

I’d tried to make a component from this “q-popup-edit” section below (cause I’ll need them more than once):
But after hours of trial&error still without any success.
So my question is: Will this be somehow possible and how?

<q-td
  v-for="col in props.cols"
  :key="col.name"
  :props="props">

 {{ col.value }}

<q-popup-edit
  v-if="['Mail1', 'Mail2'].includes(col.name)"
  :value="col.value"
  @input="v => (vm[col.name] = v)"
  @save="(v, i) => updateCell(v, i, props.row, col.name)"
  @before-show="() => cpRow(props.row)"
   buttons
  :validate="validateMail">
     <q-input
        v-model="vm[col.name]"
        :type="col.type"
         counter
         clearable
         maxlength="80"
         dense
         autofocus
        :rules="[ val => !!val || $t('txtRequired'),isValidEmail ]"
     />
</q-popup-edit> 
...

The methods “validateMail” and “isValidEmail” are yet located in the component file.
But “updateCell” and “cpRow” are methods used in the vue file in which i want to use the component.
( vm returns only this pointer )

Where I got problems in how to get the v-model set in the component, so that i’ll be able to use
somewhere “this.$emit()” somehow and furtheron on how to treat with the event callbacks @save and @before-show ?

Any suggestions? Thx.

[s.molinari]

You are on the right track with this.$emit(). You need to create methods that fire the this.$emit() method so you can “pass” information up to the parent. In other words, instead of inline methods, create methods which will do the communicating up to the parent component with this.$emit(). Those emits (as you build them) become the events available to use on the parent. Props down - events up.

https://www.vuemastery.com/courses/intro-to-vue-js/communicating-events/

Scott