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

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

1 个答案: