javascript - 获取laravel api Vue js中的所有表格行

Question

<template>
  <div class="container">
    <div class="row mt-5 mb-3">
      <div class="col-md-10">
        <h3>Gallery</h3>
      </div>
      <div class="col-md-2">
        <button class="btn btn-success" @click="newModal">
          Add New
          <i class="fas fa-plus fa-fw"></i>
        </button>
      </div>
    </div>
    <div class="row">
      <div class="card col-md-3 mx-2 px-0" v-for="media in medias.data" :key="media.id">
        <img class="card-img-top" :src="media.thumb" alt="Card image cap" />

        <p class="card-text mb-1 mx-1 px-2 py-1" v-if="media.name">{{media.name}}</p>
        <p v-else class="text-danger card-text mb-1 mx-1 px-2 py-1">No alt name given</p>

        <div class="card-body mx-1 px-2 py-1">
          <button class="btn btn-primary btn-sm" @click="editModal(media)">Edit</button>
          <button class="btn btn-sm btn-danger" @click="deleteImg(media.id)">Delete</button>
        </div>
      </div>
    </div>


    <!-- Modal -->
    <div
      class="modal fade"
      id="addNew"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addNewLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <h4 class="text-left">Upload Here</h4>
            <vue-dropzone
              ref="myVueDropzone"
              id="dropzone"
              :options="dropzoneOptions"
              @vdropzone-complete="afterComplete"
              @vdropzone-error="uploadFailed"
            ></vue-dropzone>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade"
      id="edit"
      tabindex="-1"
      role="dialog"
      aria-labelledby="editLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editLabel">Edit</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form @submit.prevent=" update()">
            <div class="modal-body">
              <div class="form-group">
                <input
                  v-model="form.name"
                  type="text"
                  name="name"
                  placeholder="Alt name"
                  class="form-control"
                  :class="{ 'is-invalid': form.errors.has('name') }"
                />
                <has-error :form="form" field="name"></has-error>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-success">Update</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
export default {
  data() {
    return {
      editmode: false,
      medias: {},
      form: new Form({
        id: "",
        name: ""
      }),
      dropzoneOptions: {
        url: "/api/gallery",
        maxFilesize: 10,
        acceptedFiles: ".jpg, .jpeg, .JPG, .JPGE",
        dictDefaultMessage: "Click or Drag and Drop to upload",
        headers: {
          "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]")
            .content
        }
      }
    };
  },
  methods: {
    uploadFailed(file, message, xhr) {
      toast({
        type: "error",
        title: "Uploading "+file.name+" failed.<br>"+message.message
      });
    },
    afterComplete() {
      Fire.$emit("AfterCreate");
    },
    update() {
      this.$Progress.start();
      // console.log('Editing data');
      this.form
        .put("api/gallery/" + this.form.id)
        .then(() => {
          // success
          $("#edit").modal("hide");
          swal("Updated!", "Information has been updated.", "success");
          this.$Progress.finish();
          Fire.$emit("AfterCreate");
        })
        .catch(() => {
          this.$Progress.fail();
        });
    },
    editModal(media) {
      this.form.reset();
      $("#edit").modal("show");
      this.form.fill(media);
    },
    newModal() {
      this.$refs.myVueDropzone.removeAllFiles();
      $("#addNew").modal("show");
    },
    deleteImg(id) {
      swal({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, delete it!"
      }).then(result => {
        // Send request to the server
        if (result.value) {
          this.form
            .delete("api/gallery/" + id)
            .then(() => {
              swal("Deleted!", "Your file has been deleted.", "success");
              Fire.$emit("AfterCreate");
            })
            .catch(() => {
              swal("Failed!", "There was something wronge.", "warning");
            });
        }
      });
    },
    initialLoad() {
      axios.get("api/gallery").then(({ data }) => (this.medias = data));
    }
  },
  created() {
    this.initialLoad();
    Fire.$on("AfterCreate", () => {
      this.initialLoad();
    });
    //    setInterval(() => this.initialLoad(), 3000);
  },
  components: {
    vueDropzone: vue2Dropzone
  }
};
</script>

我的 Controller 中有以下代码片段:

    public function index()
    {
        return Media::all();
    }

来 self 的 vue 组件:

export default {
  data() {
    return {
      medias: {}
    };
  },
  methods: {
    initialLoad() {
      axios
        .get("api/gallery")
        .then(({
          data
        }) => (this.medias = data));
    }
  },
  created() {
    this.initialLoad();
  }
};

我正在尝试获取所有表格行并将其显示到我的 vue 中成分。但使用上面的代码我得到了空白屏幕。

console.log(this.medias)在控制台中也没有给出任何内容。

我也尝试过:

$data = Media::all();
return response() - > json($data);

仍然无法打印表中的数据。

路线从 api.php :

Route::apiResources(['gallery' => 'API\MediasController']);

此外，如果我将 Controller 中的代码段替换为 return Media::latest()->paginate(20);它确实有效。

Answer 1

all() 返回一个 Collection，而 paginate() 返回一个 Paginator。前者是您的数据，后者包含您的数据。

在您的模板中，您将为 medias.data 中的每个元素输出一个 div(第 15 行)。这适用于 paginate() 的返回值，但不适用于 all() 的返回值。如果您想使用all()，只需从v-for="media in medias.data"中删除.data即可。

顺便说一句，console.log(this.medias) 不会记录您的数据，因为它位于 Vue 组件内部。登录 Vue devtools ，这是跟踪 Vue 实例内数据的标准方法。