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

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

我假设您有一个返回所有 vendor 数据的 Controller 。类似的东西；

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

这将返回所有 vendor 的 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))
}