'v-for' с 'v-if' vuejs / laravel

Question

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

[vue / no-use-v-if-with-v-for] Переменная 'Books' в директиве v-for 'должна быть заменена вычисляемым свойством, которое вместо этого возвращает отфильтрованный массив , Вы не должны смешивать 'v-for' с 'v-if'.

<tr role="row" class="even" v-for="Stock in Stocks.data" v-bind:key="Stock.id">
 <td v-for="Book in Books"
     :value="Book.id"
     :key="Book.id"
     v-if="Stock.book_id === Book.id">
     {{Book.name}}
 </td>
 </tr>

Ниже приведен полный запас. vue

<template>
  <div class="container">
    <div class="vld-parent">
      <loading
        :active.sync="isLoading"
        :can-cancel="true"
        :on-cancel="onCancel"
        :is-full-page="fullPage"
        color="#3cb371"
      ></loading>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>جدول‌ در انبار</h2>
          <ul class="nav navbar-right panel_toolbox">
            <li>
              <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
              </a>
            </li>

            <li>
              <a class="close-link">
                <i class="fa fa-close"></i>
              </a>
            </li>
          </ul>
          <div class="clearfix"></div>
        </div>
        <div class="x_content">
          <div
            id="datatable-buttons_wrapper"
            class="dataTables_wrapper form-inline dt-bootstrap no-footer"
          >
            <div class="dt-buttons btn-group" style="margin-bottom:5px;">
              <button
                class="btn btn-success buttons-copy buttons-html5 btn-sm"
                aria-controls="datatable-buttons"
                @click="newModal"
              >ثبت در انبار جدید</button>
              <button
                style="margin-left: 10px;"
                class="btn btn-danger buttons-copy buttons-html5 btn-sm"
                aria-controls="datatable-buttons"
                @click="delt"
              >حذف چندگانه</button>
              <a
                href="Report/viewer.php"
                target="_blank"
                class="btn btn-info buttons-copy buttons-html5 btn-sm"
                aria-controls="datatable-buttons"
              >
                <i class="fa fa-file-text"></i>
                گذارشات
              </a>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <table
                  id="datatable-fixed-header99"
                  class="table table-striped table-bordered dataTable no-footer"
                  role="grid"
                  aria-describedby="datatable-fixed-header_info"
                >
                  <thead>
                    <tr role="row">
                      <th style="width:1%;">
                        <input type="checkbox" @click="selectAll" v-model="allSelected" />
                      </th>
                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label="کود: activate to sort column ascending"
                      >کود</th>
                      <th
                        class="sorting_asc"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-sort="ascending"
                        aria-label=": activate to sort column descending"
                      >نوم</th>

                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label="  : activate to sort column ascending"
                      >د الماری شمیره</th>
                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label="پیرودونه شمیره: activate to sort column ascending"
                      >پیرودونه شمیره</th>
                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" د کتابونو شمیر : activate to sort column ascending"
                      >د کتابونو شمیر</th>
                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" نرخ : activate to sort column ascending"
                      >نرخ</th>
                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" نیټه : activate to sort column ascending"
                      >نیټه</th>

                      <th
                        class="sorting"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" تنظیمات : activate to sort column ascending"
                      >تنظیمات</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr
                      role="row"
                      class="odd"
                      v-if="Stocks.data!=undefined && Stocks.data.length == 0 || Stocks.data!=undefined && Stocks.data.length=='' "
                    >
                      <td colspan="7" align="center" :v-show="hidebutton=false">
                        <p class="text-center alert alert-danger">په میز کې هیڅ معلومات نشته</p>
                      </td>
                    </tr>
                    <tr role="row" class="even" v-for="Stock in Stocks.data" v-bind:key="Stock.id">
                      <td>
                        <div class="custom-control custom-checkbox">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            :value="Stock.id"
                            v-model="checkedRows"
                            id="chekboxs"
                          />

                          <label class="form-check-label"></label>
                        </div>
                      </td>
                      <td>{{Stock.id}}</td>
                      <td
                        v-for="Book in Books"
                        :value="Book.id"
                        :key="Book.id"
                        v-if="Stock.book_id === Book.id"
                      >{{Book.name}}</td>
                      <td
                        v-for="Shell in Shells"
                        :value="Shell.id"
                        :key="Shell.id"
                        v-if="Stock.shell_id === Shell.id"
                      >{{Book.name}}</td>
                      <td
                        v-for="Purchase in Purchases"
                        :value="Purchase.id"
                        :key="Purchase.id"
                        v-if="Stock.purchase_id === Purchase.id"
                      >{{Book.name}}</td>

                      <td>{{Stock.quantity}}</td>
                      <td>{{Stock.unitprice}}</td>
                      <td>{{Stock.supplydate }}</td>
                      <td>
                        <a href="#" class="btn btn-info btn-xs" @click="editModal(Stock)">
                          <i class="fa fa-pencil"></i> ویرایش
                        </a>
                        <a href="#" class="btn btn-danger btn-xs" @click="deleteStock(Stock.id)">
                          <i class="fa fa-trash-o"></i> حذف
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <pagination :data="Stocks" @pagination-change-page="getResults"></pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- insert modal -->

    <!-- </div> -->
    <!-- end of Insert modal -->
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";
// import GridLoader from "vue-spinner/src/GridLoader.vue";
import Loading from "vue-loading-overlay";
// // // Import stylesheet
import "vue-loading-overlay/dist/vue-loading.css";
import "vue-search-select/dist/VueSearchSelect.css";
import { ModelSelect } from "vue-search-select";
import { ModelListSelect } from "vue-search-select";

export default {
  // el: "#wrapper2",

  components: {
    ModelListSelect,
    Datepicker,
    Loading
  },

  data() {
    return {
      selected: { name: null, id: null },

      isLoading: false,
      fullPage: true,
      hidebutton: true,
      seen: false,
      color: "blue",
      editMode: false,
      Books: {},
      Shells: {},
      Purchases: {},
      Nationalities: {},
      Nationalities2: [],
      Nationalities3: [],
      Book_ids: [],
      Stocks: {},
      Stocks2: [],
      selected: [],
      allSelected: false,
      Booksarray: [],
      Shellsarray: [],
      checkedRows: [],
      data: [],
      url: "api/getAllStock",
      form: new Form({
        id: "",
        book_id: "",
        shell_id: "",
        purchase_id: "",
        quantity: "",
        unitprice: "",
        supplydate: ""
      })
    };
  },

  mounted: function() {
    this.alert(); //method1 will execute at pageload
  },
  methods: {
    selectAll: function() {
      this.checkedRows = [];

      if (!this.allSelected) {
        for (user in this.data) {
          this.checkedRows.push(this.data[user].id);
        }
      }
    },

    doAjax() {
      this.isLoading = true;
      this.color = "blue";
      // simulate AJAX
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    onCancel() {
      console.log("User cancelled the loader.");
    },
    refrash: function() {
      $("#addNew").modal("hide");
    },
    loadallStocks() {
      axios.get("api/Stock").then(({ data }) => (this.Stocks = data));
    },
    getBook_id: function() {
      if (this.form.book_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>انتخاب  کتاب لازم است.</h5>"
        });
        this.loadallStocks();
      } else {
        this.seen = true;
        // this.loader.show();
        $(".hideme").show();
        // this.$Progress.start();
        axios
          .get("api/getBybook_ids", {
            params: { book_id: this.form.book_id }
          })
          .then(
            function(response) {
              this.Stocks = response.data.data;
            }.bind(this)
          );
        this.seen = false;
      }
    },
    getshell_id: function() {
      if (this.form.shell_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>انتخاب  الماری لازم است.</h5>"
        });
        this.loadallStocks();
      } else {
        this.seen = true;
        // this.loader.show();
        $(".hideme").show();
        // this.$Progress.start();
        axios
          .get("api/getByshell_id", {
            params: { shell_id: this.form.shell_id }
          })
          .then(
            function(response) {
              this.Stocks = response.data.data;
            }.bind(this)
          );
        this.seen = false;
      }
    },

    getResults(page = 1) {
      this.isLoading = true;
      this.color = "blue";
      // simulate AJAX
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
      axios
        .get("api/Stock?page=" + page)
        .then(response => {
          this.Stocks = response.data;
        })

        .then(
          function(response) {
            this.Stocks = response.data.data;
          }.bind(this)
        );
    },
    updateStock() {
      if (this.form.book_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفاکتاب را انتخاب نماید .</h5>"
        });
      } else if (this.form.shell_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا الماری را انتخاب نماید.</h5>"
        });
      } else if (this.form.purchase_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا ایدی خریداری را انتخاب نماید.</h5>"
        });
      } else if (this.form.quantity == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> تعداد لازم است .</h5>"
        });
      } else if (this.form.unitprice == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> قیمت لازم است.</h5>"
        });
      } else if (this.form.supplydate == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>انتخاب تاریخ لازم است.</h5>"
        });
      } else {
        this.form
          .put("api/Stock/" + this.form.id)
          .then(() => {
            $("#addNew").modal("hide");
            // swal.fire(
            //   "Updated!",
            //   "Stock Information updated successfully.",
            //   "success"
            // );

            toast.fire({
              icon: "success",
              type: "warning",
              // title: "معلومات در انبار کننده موافقنه تمدید گردید.",
              // background: "#ff6f69",
              html: "<h5 >معلومات در انبار  موافقنه تمدید گردید.</h5> "
            });
            Fire.$emit("refreshPage");
          })
          .catch(e => {
            console.log(e);
          });
      }
    },
    detailModal(emp1) {
      this.form.reset();
      $("#addNew3").modal("show");
      this.form.fill(emp1);
    },
    printModal(emp) {
      this.form.reset();
      $("#addNew2").modal("show");
      // if (seen3 == true) {
      //   seen3 = false;
      // }
      this.form.fill(emp);
    },
    editModal(Stock) {
      this.editMode = true;
      this.form.reset();
      $("#addNew").modal("show");
      this.form.fill(Stock);
    },
    newModal() {
      this.editMode = false;
      this.form.reset();
      if (this.Books != undefined && this.Books.length == 0) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا حداقل  یک کتاب را ثبت کنید.</h5>"
        });
      } else if (this.Shells != undefined && this.Shells.length == 0) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا حداقل  یک الماری را ثبت کنید.</h5>"
        });
      } else if (this.Purchases != undefined && this.Purchases.length == 0) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا حداقل  ایدی خریداری را ثبت کنید.</h5>"
        });
      } else {
        $("#addNew").modal("show");
      }
    },
    delt() {
      var chekboxs = document.getElementById("chekboxs");
      if (chekboxs.checked || this.allSelected) {
        swal
          .fire({
            title: "آیا مطمئن هستید که می خواهید سوابق انتخاب شده را حذف کنید؟",
            text: "شما نمی توانید این را برگردانید!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "بلی، حذف نماید!",
            cancelButtonText: "لغوه"
          })
          .then(result => {
            //Send request to the server
            if (result.value) {
              axios
                .delete("api/multipledeleteStock", {
                  params: { id: this.checkedRows }
                })
                .then(() => {
                  toast.fire({
                    type: "success",
                    icon: "success",
                    html: "<h5>در انبار  موافقانه حذف گردید!</h5>"
                  });
                  Fire.$emit("refreshPage");
                })
                .catch(e => {
                  console.log(e);
                });
            }
          });
      } else {
        toast.fire({
          type: "warning",
          icon: "warning",
          html:
            "<h5>شما چیزی را انتخاب نکردید که حذف شود لطفا آن را انتخاب کنید!</h5>"
        });
      }
    },

    deleteStock(id) {
      swal
        .fire({
          title: "شما مطمن هستید؟",
          text: "شما نمی توانید این را برگردانید!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "بلی، حذف نماید!",
          // buttons: ["Select Patient?", "Speed Case?"],
          cancelButtonText: "لغوه"
        })
        .then(result => {
          //Send request to the server
          if (result.value) {
            this.form
              .delete("api/Stock/" + id)
              .then(() => {
                toast.fire({
                  type: "success",
                  html: "<h5>در انبار  موافقانه حذف گردید!</h5>"
                });
                Fire.$emit("refreshPage");
              })
              .catch(e => {
                console.log(e);
              });
          }
        });
    },
    alert() {
      // axios.get("api/getAllStock").then(({ data }) => (this.data = data));
      // if (this.Stocks.length <= 3) {
      //   toast.fire({
      //     type: "warning",
      //     icon: "warning",
      //     html: "<h5> تعداد کتابهای موجود کمتر از ۳ جلد میباشد .</h5>"
      //   });
      // }
      axios.get("api/countstocks").then(response => {
        let data = response.data;
        // if (data.Total <= 70) {
        //   toast.fire({
        //     icon: "warning",
        //     type: "warning",
        //     html: "<h5> تعداد کتابهای موجود کمتر از 70 جلد میباشد .</h5>"
        //   });
        // }
        if (data) {
          data.forEach(element => {
            this.Nationalities2.push(element.Total);
            this.Book_ids.push(element.book_id);
            if (element.Total <= 15) {
              toast.fire({
                icon: "warning",
                type: "warning",
                html:
                  "<h5> تعداد کتابهای " +
                  [element.bookname] +
                  " کمتر از 15 جلد میباشد .</h5>"
              });
            }
          });
        } else {
          toast.fire({
            icon: "warning",
            type: "warning",
            title: " مشکل."
          });
        }
      });
    },
    loadStocks() {
      // $(".hideme").hide();

      // if (this.$gate.isAdmin() || this.$gate.isUser()) {
      this.$Progress.start(); // NProgress.start();
      axios.get("api/Stock").then(({ data }) => (this.Stocks = data));

      axios.get("api/getAllStock").then(({ data }) => (this.data = data));
      axios.get("api/getAllBook").then(({ data }) => (this.Books = data));
      axios.get("api/getAllShell").then(({ data }) => (this.Shells = data));
      axios
        .get("api/getAllShell")
        .then(({ data }) => (this.Shellsarray = data));

      axios.get("api/getAllBook").then(({ data }) => (this.Booksarray = data));
      axios
        .get("api/getAllPurchase")
        .then(({ data }) => (this.Purchases = data));
      this.alert();
      this.$Progress.finish();

      // }
      // NProgress.done();
    },

    createStock() {
      // axios.get("api/chekfunction").then(response => {
      //   let data = response.data;

      if (this.form.book_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفاکتاب را انتخاب نماید .</h5>"
        });
      } else if (this.form.shell_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا الماری را انتخاب نماید.</h5>"
        });
      } else if (this.form.purchase_id == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>لطفا ایدی خریداری را انتخاب نماید.</h5>"
        });
      } else if (this.form.quantity == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> تعداد لازم است .</h5>"
        });
      } else if (this.form.unitprice == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> قیمت لازم است.</h5>"
        });
      } else if (this.form.supplydate == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>انتخاب تاریخ لازم است.</h5>"
        });
      } else {
        // this.convert();
        this.form
          .post("api/Stock")
          .then(() => {
            //    the below function will be use to reload the page

            //   this.$emit("refreshPage");
            $("#addNew").modal("hide");
            toast.fire({
              icon: "success",
              type: "success",
              html: "<h5> در انبار  موافقانه اجاد گردید</h5>"
            });
            Fire.$emit("refreshPage");
            this.form.reset();
            //   this.$Progress.finish();
          })
          .catch(er => {
            console.log(er);
          });
      }
    }
  },

  created() {
    this.loadStocks();
    // load the page after 3 secound
    Fire.$on("refreshPage", () => {
      this.loadStocks();
    });
  }
};
$(document).ready(function() {
  $("#datatable-fixed-header99").DataTable({
    paging: false,
    // ordering: false,
    info: false
  });
});

// $(".select3").select3();
</script>

Не знаю знать, как создать вычисляемое свойство, которое возвращает отфильтрованный массив или объект, любая помощь будет высоко оценена.

Answer 1

Я бы go с вычисленным свойством, которое создает объект с книгами, сгруппированными по номеру запаса

computed: {
  stocksWithBooks () {
    return this.Stocks.data.map(stock => ({
      ...stock,
      books: this.Books.filter(({ id }) => id === stock.book_id)
    })
  }
}

Теперь вы можете использовать его в своем шаблоне

<tr role="row" class="even" v-for="Stock in stocksWithBooks" v-bind:key="Stock.id">
  <td v-for="Book in Stock.books" :key="Book.id">
    {{Book.name}}
  </td>
</tr>

---

Чтобы убедиться, что вы не получите ошибок из-за времени назначения данных, вы должны убедиться, что вы определили некоторые нормальные начальные значения, например

data() {
  return {
    // ...
    Books: [], // not {}
    // ...
    Stocks: { data: [] }, // define an empty "data" array
    // ...
  }
}

Answer 2

Не используйте v-if и v-for в одном элементе, вы можете использовать template.

<tr role="row" class="even" v-for="Stock in Stocks.data" v-bind:key="Stock.id">
     <td v-for="Book in Books" :value="Book.id" :key="Book.id">
         <template v-if="Stock.book_id === Book.id">
            {{Book.name}}
         </template> 
     </td>
 </tr>