CODEWITHSUNDEEP
vue.js
Singingsongs
Singingsongs

Reputation: 11

VUEJS - how to dynamically bind a textarea to datatable field

I want to add editable fields to datatable row when the user click the add button. but it is returning undefined values and not yet editable here is the sample of the code

addPastor() {
  function bindTextArea() {
    return {
      template: `<textarea></textarea>`
    };
  }
  //this is the values to be displayed
  let empObj = {
    first_name: bindTextArea(),
    last_name: bindTextArea(),
    other_names: bindTextArea(),
    department: bindTextArea(),
    date_of_birth: bindTextArea(),
    phone: bindTextArea(),
    first_timer: bindTextArea(),
    second_timer: bindTextArea()
  };
  this.desserts = [];
  this.desserts.push(empObj);
  //console.log(this.desserts);
},
deletePastor() {}

}

Upvotes: 0

Views: 278

Answers (1)

Estradiaz
Estradiaz

Reputation: 3563

This does not look like a vue way - my guess here is you are using somth like vuetify - best is to check their examples and vue docs for v-if, slots. e.g. vuetify v-datatable you'd go with:

<v-datatable
   :items="dessert"
>
    <template #item={item}>
      <edit-row v-if="item.isEditable" :item="item" />
      <static-row v-else :item="item" />
    </template>
</v-datatable>

check docs

for slots

Implies that other frameworks are similar

Upvotes: 1

Related Questions