如何将数据显示为不同数据库表的选项

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))
}