слайдер vue-slick не работает для моих компонентов, и внешний вид разрушается - PullRequest
Новая
       14

слайдер vue-slick не работает для моих компонентов, и внешний вид разрушается

0 голосов
/ 02 января 2019

сначала, извините за мой плохой английский. Я использую Vue-Slick в моем коде Vuejs, У меня были проблемы с его стилем! когда я использую простой div или img или что-то, это прекрасно работает! но когда я использую v-for для своего компонента в нем, внешний вид стиля разрушается!

Я использую шину событий для обработки данных. я уже импортировал стиль слика-карусель и тему CSS в моих стилях. вот вам скриншот из моей проблемы https://ibb.co/4RgL1nG https://www.mediafire.com/view/oui50d2e4057wq7/Screenshot_from_2019-01-02_11-12-19.png

 <template>
  <div>
    <div class="container"  style="padding: 0 40px; height: 400px; 
     background-color: #1b1e21">
       <slick
         ref="slick" style="max-width: 100% ;  "
        :options=this.slickOptions>
        <div v-for="pst in posts">
             <div class="council-subject-content-item color 1" 
             @click="openPost(pst._id, pst.authorId)">
             <div class="title-image"></div>
            <h4 class="black-color">{{pst.title}}</h4>
            <h5>{{pst.superParentName}}</h5>
            <p class="black-color">
              {{pst.content[0].text}}{{pst.content[0].text}}
            </p>
            <div class="profile-image"></div>
            <span class="name regular-ir">{{pst.authorName}} 
 </span>
            <div class="council-subject-footer background-1">
              <span class="right number">{{pst.commentNum}}</span>
              <img class="right" 
src="../../images/consultation/comment2.svg" style="width: 20px">
              <img class="left" 
src="../../images/consultation/viewed.svg" style="width: 
24px;margin-top: 2px;">
                  <span class="left number">{{pst.seenNum}}</span>
            </div>
          </div>
        </div>
      </slick>
    </div>
     </div>
   </template>

 <script>
  import slick from 'vue-slick'
  import {eventBus} from "../../main";
  import axios from 'axios'

  export default {
    data: function () {
      return {
        posts: {},
        slickOptions: {
          slidesToShow: 4,
          centerMode: true,
          dots: true,
          arrows: true,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
               infinite: true,
                dots: true
              }
            },
             {
              breakpoint: 600,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1
              }
            }
          ]
        }
      }
    },
    beforeMount() {

axios.get('https://www.test.magisterapp.ir/v2/student/post/all/1-5?sortby=seenNum')
        .then(res => {
          this.posts = res.data.posts
        })
        .catch(error => {
          console.log(error)
        })
    },
    methods: {
      createRandClass() {
        let color = math.floor((Math.random() * 4) + 1);
        return "color" + color
      },
      openPost(id, teacherId) {
        console.log(id)
        this.$router.push({
          name: "blogPost",
          query: {
            "id": id
          },
          params: {
            "teacherId": teacherId
          }
        })
      }
    },
    components: {
      slick
    }

  }
</script>
...