Best way to load a model datas in a modal form

Best Answer

Level 80

@vincent15000 If you’re using Vue.js then it sounds like you already have the models in memory as a prop or something? So if you’re iterating over a collection of models, just pass the specific model to the modal as data:

<tr v-for="book in books">
    <td>{{ book.name }}</td>
    <td class="actions">
      <ul>
        <li><a href="showModal(book)">Edit</a></li>
      </ul>
    </td>
</tr>

export default {
  methods: {
    showModal(book) {
      // Open modal here, and pass book as prop or something
    }
  },
};

1 like

Level 63

@martinbean That's a good idea if I retrieve all datas for each model to display the table.

Level 63

@martinbean Is it possible to pass my model as a prop inside a method ? Usually I set the id of the model to update in the component.

<Form
	:id="itemId"
>
</Form>

And I set the value of the id in the method.

Level 80

@vincent15000 If you have the whole model, then you’ll have the ID from within that object, won’t you?

1 like

Level 63

@martinbean Sure ... but is there a best way between both I have presented above ?

Level 80

@vincent15000 I don’t know what you’re asking, or trying to demonstrate from a one-line snippet.

1 like

Level 63

@martinbean Is it better to :

load the datatable page with a modal form and fill the modal by revisiting the page and loading only the model and retrieve the datas with usePage()
or load the datatable page with a modal form and let the modal retrieve its datas via an axios request

Level 80

or load the datatable page with a modal form and let the modal retrieve its datas via an axios request

@vincent15000 This completely defeats the point of what I suggested in the first place.

You’re iterating over a list of objects. You clearly already have the object. Why make a network request to get something you already have?

You‘re looping over a list to display a table. So just pass the current item to whatever form or modal component on click.

Again:

<tr v-for="book in books" v-bind:key="book.id">
  <!-- You have a book here, because you're looping over some books -->
  <td class="actions">
    <!-- So just pass the book instance as an argument to a method -->
    <button v-on:click="viewBook(book)">View</button>
  </td>
</tr>

methods: {
  viewBook(book) {
    // The book argument here is the book in the row you clicked the button
  },
},

1 like