Question

我正在使用Laravel 5.7和VueJs 2.5.* ...

我有发票表，我需要在新组件中显示特定的发票，以便用户可以看到他想要的任何发票或打印该发票。

我不知道该怎么做，我只是在玩，如果您能帮助我，我将非常感谢您。

<router-link>

<router-link to="/ct-invoice-view" @click="openInvoice(ctInvoice)">
  <i class="fas fa-eye fa-lg text-blue"></i>
</router-link>

在此处显示Customer信息，如下所示：

<div class="col-sm-4 invoice-col">
  <address v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
     <strong>Customer Info</strong><br>
     Name: <span>{{ ctInvoice.customer.customer_name }}</span>

发票视图组件data()和method{}

data() {
    return {
      ctInvoices: {},
      customers: null
    };
  },
  methods: {
    openInvoice(ctInvoice) {
      axios
        .get("api/ct-invoice/show/" + this.viewInvoice)
        .then(({
          data
        }) => (this.ctInvoices = data.data));
    },

便于理解的图片

Answer 1

您需要查看动态路由匹配：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

然后，您需要在发票视图中使用 axios.get 。 beforeMount 功能，其中 this。$ route.params.id 将保存发票像这样应用链接时要加载的ID：

<router-link :to="`/ct-invoice-view/${ctInvoice.id}`">
  <i class="fas fa-eye fa-lg text-blue"></i>
</router-link>

或者...

我建议您不要离开列表，这对那些已经过滤了列表然后返回查看更多发票并必须再次过滤的用户来说很烦人，除非过滤选项和当前结果很粘

执行此操作的方法有很多种，它们只是示例而已，通常，我会适当使用modal，发票视图会在显示的页面上加载数据，但可以帮助您入门解决方案进行试验，然后稍后尝试适应可重用的模态组件：

<button @click="showInvoice = ctInvoice.id">
  <i class="fas fa-eye fa-lg text-blue"></i>
</button>

data() {
    return {
        loading: false,
        invoice: {},
        customers: null
    };
},
computed: {
    showInvoice: {
        get: function() {
            return this.invoice.hasOwnProperty('id');
        },
        set: function(value) {

            if(value === false) {
                this.invoice = {};
                return;
            }

            // could check a cache first and push the cached item into this.invoice else load it:

            this.loading = true;

            axios.get("api/ct-invoice/show/" + value).then(response => {
                 // you could push the invoice into a cache
                this.invoice = response.data;

            }).cache(error => {
                // handle error
            }).finally(() => {
                this.loading = false;
            });
        }
    }
}

在视图发票组件中，有一个带有绑定 @click =“ $ emit（'close'）” 的关闭按钮查看本文，了解$ emit的工作原理：https://vuejs.org/v2/guide/components-custom-events.html

<div v-if="loading" class="loading-overlay"></div>
<view-invoice v-if="showInvoice" :invoice="invoice" @close="showInvoice = false" />
<table v-else>....</table>

在显示发票时隐藏表格，在丢失表格内容状态时尝试使用v-show代替v-if。

在发票视图中，称为发票的属性将包含发票数据。查看本文，了解如何使用道具：https://vuejs.org/v2/guide/components-props.html

提示：@close监听$ emit（'close'）

在表格和发票视图之间切换时也可以使用。 https://vuejs.org/v2/guide/transitions.html

Answer 2

@MarcNewton

我做了这样的事情，它对我有用，你能为我复习一下吗？

<router-link>到“发票视图”组件

<router-link v-bind:to="{name: 'ctInvoiceView', params: {id: ctInvoice.id}}">
  <i class="fas fa-eye fa-lg text-blue"></i>
</router-link>

像这样获取特定发票ID的数据：

created: function() {
  axios
    .get("/api/ct-invoice/" + this.$route.params.id)
    .then(({
      data
    }) => {
      console.log(data);
      this.form = new Form(data);
    })
    .catch(error => {
      console.log(error.response);
    });
},

如何在发票模板中显示我的发票数据

2 个答案: