• Почему не работает pagination?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Moon Presence, Ваш вариант работает я почитал API оно с autoPlay плохо работает , Спасибо извините за беспокойство .
    Написано
  • Почему не работает pagination?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    тоже так подумал как для стрелок , не работает к сожалению, спасибо за совет
    Написано
  • Почему не работает CDN swiper?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    уже понял, спасибо )
    Написано
  • Как обнулить display block?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    dmitry-toster, там просто пути мои из редактора , они же для примера не нужны
    Написано
  • Можно ли обновить gulp в проекте?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Спасибо
    Написано
  • Почему не работает lightgallery?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    WapSter, Почему вы сразу приняли это за оскорбление? я имел введу вообще.. в будущем в своих кодах а не сейчас
    Написано
  • Почему не работает lightgallery?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    А сам jqury то забыл подключить, будьте бдительны)
    <script src="jquery.min.js"></script>
    указать указал а файла то такого нет
    Написано
  • Почему не работает lightgallery?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    <link type="text/css" rel="stylesheet" href="css/lightgallery.min.css" />
    Написано
  • Почему ошибка при сборке Gulp?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Kovalsky,
    Common.js это фаил который собрал уже все файлы в месте и собранный выбивает ошибку
    Написано
  • Как Swiper разместить ещё один Swiper?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    ничего не получается , спасибо
    Написано
  • Почему не отправляет форму?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    тоже так подумал взял с другого проекта где эта же форма работает, и результат то же , спасибо за мысль
    Написано
  • Как при скроле страницы поменять цвет хедера?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Спасибо большое
    Написано
  • Как сделать чтобы при ширине экрана в 400px осталась одна карусель?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Ну это когда смотрю в книгу вижу фигу) спасибо
    Написано
  • Можно ли select задать transition?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Понял спасибо
    Написано
  • Как по клику изменить текст?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    воу, Спасибо познавательно!
    Написано
  • Как по клику изменить текст?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Спасибо
    Написано
  • Как по клику изменить текст?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Спасибо
    Написано
  • Как исправить ошибку?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    всё делал что там написано
    Написано
  • Ошибка при переходе?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    Crazy Citizen, 5e72328537ef1715611370.jpeg
    сдвинулся с мёртвой точки,, спасибо)_
    Написано
  • Ошибка при переходе?

    OldSchool1705
    @OldSchool1705 Автор вопроса
    <template>
      <div class="row">
        <div class="col-md-6" v-for="(post, i) in posts" :key=i>
          <div class="card mt-4">
            <img v-if="post.post_images.length" class="card-img-top" :src="post.post_images[0].post_image_path">
            <div class="card-body">
              <p class="card-text"><strong>{{ post.title }}</strong> <br>
                {{ truncateText(post.body) }}
              </p>
            </div>
            <button class="btn btn-success m-2" @click="viewPost(i)">View Post</button>
          </div>
        </div>
        <el-dialog v-if="currentPost" :visible.sync="postDialogVisible" width="40%">
          <span>
            <h3>{{ currentPost.title }}</h3>
            <div class="row">
              <div class="col-md-6" v-for="(img, i) in currentPost.post_images" :key=i>
                <img :src="img.post_image_path" class="img-thumbnail" alt="">
              </div>
            </div>
            <hr>
            <p>{{ currentPost.body }}</p>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postDialogVisible = false">Okay</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import { mapState } from 'vuex';
    
    export default {
      name: 'all-posts',
      data() {
        return {
          postDialogVisible: false,
          currentPost: '',
        };
      },
      computed: {
        ...mapState(['posts'])
      },
      beforeMount() {
        this.$store.dispatch('getAllPosts');
      },
      methods: {
        truncateText(text) {
          if (text.length > 24) {
            return `${text.substr(0, 24)}...`;
          }
          return text;
        },
        viewPost(postIndex) {
          const post = this.posts[postIndex];
          this.currentPost = post;
          this.postDialogVisible = true;
        }
      },
    }
    </script>
    <code lang="javascript">
    <template>
        <div class="card mt-4">
            <div class="card-header">New Post</div>
            <div class="card-body">
                <div
                        v-if="status_msg"
                        :class="{ 'alert-success': status, 'alert-danger': !status }"
                        class="alert"
                        role="alert"
                >{{ status_msg }}</div>
                <form>
                    <div class="form-group">
                        <label for="exampleFormControlInput1">Title</label>
                        <input
                                v-model="title"
                                type="text"
                                class="form-control"
                                id="title"
                                placeholder="Post Title"
                                required
                        />
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">Post Content</label>
                        <textarea v-model="body" class="form-control" id="post-content" rows="3" required></textarea>
                    </div>
                    <div class>
                        <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-change="updateImageList"
                                :auto-upload="false"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt />
                        </el-dialog>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <button
                        type="button"
                        @click="createPost"
                        class="btn btn-success"
                >{{ isCreatingPost ? "Posting..." : "Create Post" }}</button>
            </div>
        </div>
    </template>
    
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409eff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    
    <script>
        import { setTimeout } from "timers";
        import { mapState, mapActions } from "vuex";
    
        export default {
            name: "create-post",
            props: ["posts"],
            data() {
                return {
                    dialogImageUrl: "",
                    dialogVisible: false,
                    imageList: [],
                    status_msg: "",
                    status: "",
                    isCreatingPost: false,
                    title: "",
                    body: ""
                };
            },
            computed: {},
            mounted() {},
            methods: {
                ...mapActions(["getAllPosts"]), //moved it from computed properties
                updateImageList(file) {
                    this.imageList.push(file.raw);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.imageList.push(file);
                    this.dialogVisible = true;
                },
                createPost(e) {
                    e.preventDefault();
                    if (!this.validateForm()) {
                        return false;
                    }
                    const that = this;
                    this.isCreatingPost = true;
                    let formData = new FormData();
    
                    formData.append("title", this.title);
                    formData.append("body", this.body);
    
                    $.each(this.imageList, function(key, image) {
                        formData.append(`images[${key}]`, image);
                    });
    
                    api
                        .post("/post/create_post", formData, {
                            headers: { "Content-Type": "multipart/form-data" }
                        })
                        .then(res => {
                            this.title = this.body = "";
                            this.status = true;
                            this.showNotification("Post Successfully Created"); //fixed spelling mistake
                            this.isCreatingPost = false;
                            this.imageList = [];
                            /*
                             this.getAllPosts() can be used here as well
                             note: "that" has been assigned the value of "this" at the top
                             to avoid context related issues.
                             */
                            that.getAllPosts();
                        });
                },
                validateForm() {
                    //no vaildation for images - it is needed
                    if (!this.title) {
                        this.status = false;
                        this.showNotification("Post title cannot be empty"); //fixed spelling mistake
                        return false;
                    }
                    if (!this.body) {
                        this.status = false;
                        this.showNotification("Post body cannot be empty");
                        return false;
                    }
                    return true;
                },
                showNotification(message) {
                    //fixed spelling mistake
                    this.status_msg = message;
                    setTimeout(() => {
                        this.status_msg = "";
                    }, 3000);
                }
            }
        };
    </script>
    
    </code>
    Написано