Как отобразить данные как опцию другой таблицы БД

Question

Я использую Laravel 5.7 & VueJs 2.5.*. Я создаю приложение для выставления счета.

У меня есть таблица Vendors, и мне нужно показать все Vendors в моем созданииФорма счета (например, этот счет относится к выбранному Vendor).

Это мой <script> код:

<script>
  export default {
    data() {
      return {
        ticketInvoices: {},
        ticketInvoiceItems: [],
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_grand_total: "",
        })
      };
    },
    methods: {
      addItems() {
        this.ticketInvoiceItems.push({
          id: "",
          passenger_name: "",
          ticket_no: "",
          flight_no: "",
          departure_date: "",
          sub_total: ""
        });
      },
      removeItems(pos) {
        this.ticketInvoiceItems.splice(pos, 1);
      },
      </script>

Необходимо отобразить список Vendor здесь:

<div class="form-group">
  <label for="vendor">Select Vendor</label>
  <select class="form-control" :class="{ 'is-invalid': form.errors.has('vendor') }">
    <option value="" disabled selected>Please Select Vendor</option>
    <option>All Vendors Name</option>
  </select>
  <has-error :form="form" field="vendor"></has-error>
</div>

Answer 1

Я предполагаю, что у вас есть контроллер, который возвращает данные всех поставщиков.Что-то вроде:

public function index()
{
   $vendors = Vendor::all();
   return $vendors;
}

Возвращает JSON-ответ всем поставщикам.

В своем HTML-коде вы можете сделать это;

<div class="form-group">
    <label for="vendor">Select Vendor</label>
    <select class="form-control" :class="{ 'is-invalid': form.errors.has('vendor')}">
        <option value="" disabled selected>Please Select Vendor</option>
        <option v-for="vendor in vendors">{{ vendor }}</option>
    </select>
    <has-error :form="form" field="vendor"></has-error>
</div>

В своем коде Vue;

data () {
    return {
      vendors: null
    }
},
mounted () {
axios
  .get('https://example.com/api/vendors')
  .then(response => (this.vendors = response))
}