Как отобразить данные моего счета в шаблоне счета

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

@ 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>

Получение данных определенного идентификатора счета-фактуры, например:

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

Answer 2

Вам нужно посмотреть на соответствие динамического маршрута: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

Затем вам нужно использовать axios.get в представлениях счетов-фактур beforeMount , где this. $ Route.params.id будет содержать нужный идентификатор счета-фактуры загрузить, если ссылка применяется так:

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

Другой способ ...

Я предлагаю не уходить от списка, это может раздражать пользователей, которые отфильтровали список, а затем вернулись к нему, чтобы просмотреть дополнительные счета-фактуры, и пришлось снова фильтровать, если параметры фильтра и текущие результаты не являются "липкими"

Есть несколько способов сделать это, и они длинны для примера. Как правило, я бы правильно использовал модальный , а представление счета-фактуры загружало данные на дисплей, но чтобы вы начали базовую в решении страницы, чтобы поэкспериментировать, затем попробуйте позже адаптироваться в модальном компоненте многократного использования:

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

---

В компоненте view-invoice есть кнопка закрытия с привязкой @ 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 при потере состояния содержимого таблицы.

Внутри вашего счета-фактуры свойство под названием invoice будет содержать данные счета. Проверьте эту статью о том, как использовать реквизит: https://vuejs.org/v2/guide/components-props.html

Подсказка: @close слушает $ emit ('close')

Может также использоваться при переключении между таблицей и представлением счета. https://vuejs.org/v2/guide/transitions.html