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

Question

我正在使用 Laravel 5.7 & VueJs 2.5.*。我正在构建发票应用程序。

我有一个 table 的 Vendors 并且需要在我的 create Invoice 表格中显示所有 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

我假设您有一个控制器 returns 所有供应商的数据。像;

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

这 returns 对所有供应商的 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))
}

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

How To Show Data as Option of Different DB Table

html

javascript

laravel

vuejs2

laravel-5.7