Uncaught TypeError：无法设置未定义DataTable的属性'_DT_CellIndex'

Question

我在laravel / Vuejs中使用Datatalbe，数据完美地加载到表中，但是我面临的问题是搜索框未显示，并且显示了以下错误。

Uncaught TypeError：无法设置未定义的属性'_DT_CellIndex'在Ga（jquery.dataTables.min.js：527）在M（jquery.dataTables.min.js：279）在HTMLTableRowElement处。 （jquery.dataTables.min.js：287）在jquery.min.js：53在Function.map（jquery.min.js：197）在n.fn.init.map（jquery.min.js：52）在马（jquery.dataTables.min.js：285）在e（jquery.dataTables.min.js：2264）在HTMLTableElement。 （jquery.dataTables.min.js：2269）在Function.each（jquery.min.js：170）

任何帮助都会受到赞赏。

stock.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"
                        aria-label="کود: activate to sort column ascending"
                      >کود</th>
                      <th
                        class="sorting_asc"
                        aria-controls="datatable-buttons"
                        aria-sort="ascending"
                        aria-label=": activate to sort column descending"
                      >نوم</th>

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

                      <!-- <th
                        class="sorting"
                        aria-controls="datatable-buttons"


                        aria-label=" تنظیمات : activate to sort column ascending"
                      >تنظیمات</th>-->
                    </tr>
                  </thead>

                  <tbody v-for="Stock in Stocks.data" v-bind:key="Stock.id">
                    <!-- <tr
                      role="row"
                      class="odd"
                      v-if="Stocks.data!=undefined && Stocks.data.length == 0 || Stocks.data!=undefined && Stocks.data.length=='' "
                    >
                      <td colspan="9" align="center" :v-show="hidebutton=false">
                        <p class="text-center alert alert-danger">په میز کې هیڅ معلومات نشته</p>
                      </td>
                    </tr>-->
                    <tr role="row" class="even">
                      <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.filter((Book) => Stock.book_id === Book.id)"
                        :key="`A-${Book.id}`"
                      >{{Book.name}}</td>

                      <td
                        v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
                        :key="`B-${sh.id}`"
                      >{{sh.name}}</td>

                      <td
                        v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
                        :key="`C-${prbo.id}`"
                      >{{prbo.id}}</td>
                      <!-- <td>two</td> -->
                      <!-- <td>thrr</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>

  </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: {},
      // Stocks: {},
      Books: [],
      Shells: [],
      Purchased: [],
      Nationalities: {},
      Nationalities2: [],
      Nationalities3: [],
      Book_ids: [],
      // Stocks: [],
      Stocks: { data: [] },
      Stocks2: [],
      selected: [],
      allSelected: false,
      Booksarray: [],
      Shellsarray: [],
      checkedRows: [],
      data: [],
      url: "api/getAllStock",
      form: new Form({
        id: "",
        book_id: "",
        shell_id: "",
        purchase_id: "",
        quantity: "",
        unitprice: "",
        supplydate: ""
      })
    };
  },

  computed: {
    stocksWithBooks() {
      return this.Stocks.data.map(stock => ({
        ...stock,
        books: this.Books.filter(({ id }) => id === stock.book_id)
      }));
    }
    // filteredBooks() {
    //   return Object.values(this.Books).filter(
    //     Book => this.Stock.book_id === Book.id
    //   );
    // }
  },
  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.Purchased != undefined && this.Purchased.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/getAllBook")
        .then(({ data }) => (this.Books = Array.isArray(data) ? data : []));
      axios
        .get("api/getAllShell")
        .then(({ data }) => (this.Shells = Array.isArray(data) ? 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.Purchased = Array.isArray(data) ? 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,
    responsive: true,
    bLengthChange: false
  });
});

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

如果我删除这些行，错误消失

 <!-- <td
                        v-for="Book in Books.filter((Book) => Stock.book_id === Book.id)"
                        :key="`A-${Book.id}`"
                      >{{Book.name}}</td>

                      <td
                        v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
                        :key="`B-${sh.id}`"
                      >{{sh.name}}</td>

                      <td
                        v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
                        :key="`C-${prbo.id}`"
                      >{{prbo.id}}</td>-->

但是如果还有其他方法，我需要使用上面的代码，请告知。

Answer 1

在第一个之前缺少

<td> 
  <span v-for="Book in Books.filter((Book) => Stock.book_id === Book.id)"
    :key="Book.id" style="margin-right: 0.5em">
    {{ Book.name }}
  </span>
</td>
<td> 
  <span v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
    :key="sh.id" style="margin-right: 0.5em">
    {{ sh.name }}
  </span>
</td>
<td> 
  <span v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
    :key="prbo.id" style="margin-right: 0.5em">
    {{ prbo.name }}
  </span>
</td>

或简单连接：

<td> 
  {{ Books.filter((Book) => Stock.book_id === Book.id).map((Book) => Book.name).join(', ') || 'no books' }}
</td>
<td> 
  {{ Shells.filter((sh)=>Stock.shell_id === sh.id).map((Stock) => Stock.name).join(', ') || 'no shells' }}
</td>
<td> 
  {{ Purchased.filter((prbo)=>Stock.purchase_id === prbo.id).map((prbo) => prbo.name).join(', ') || 'no purchases' }}
</td>