Как добавить код разбиения на страницы JavaScript в компоненте Vue JS - PullRequest
1 голос
/ 05 ноября 2019

Я пытаюсь добавить код разбиения на страницы в компоненте Vue, и я пытался добавить код в смонтированном хуке для вызова функции, но он не работает. Я хочу загрузить код после полной загрузки компонента. Кроме того, код JQuery не загружается в компонент Vue. Нужно ли мне менять свой код на чистый JavaScript для этого. Можете ли вы указать мне, как решить проблему?

// Create a root instance for each block

var vueElements = document.getElementsByClassName('search-bento-block');
var count = vueElements.length;

const store = new Vuex.Store({
  state: {
    query: drupalSettings.bento.query ? drupalSettings.bento.query : '',
    bentoComponents: []
  },
  mutations: {
    add (state, payload) {
      state.bentoComponents.push(payload)
    }
  },
  getters: {
    getComponents: state => {
      return state.bentoComponents
    }
  }
})

// Loop through each block
for (var i = 0; i < count; i++) {
  Vue.component('results', {
    template: `
    <div v-if="results && results.length > 0">
    <div v-for="result in results">
      <div class="search-result-item">
        <div class="image-holder">
          <img src="https://images.unsplash.com/photo-1517836477839-7072aaa8b121?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80">
        </div>
        <div class="container-content">
          <a v-bind:href="result.url">
            <h3 v-html="result.title"></h3>
          </a>
          <p>Subjects: <span v-html="result.subjects"></span></p>
        </div>

      </div>
    </div>

    </div>

    <div v-else>
      <p>No results found.</p>
    </div>
    `,
    props: ['results'],
  })

   new Vue({
    el: vueElements[i],
    store,
    data: {
      message: 'Hello There!',
      results: [],
      total: 0,
      bentoSettings: [],
    },
    methods: {
      addComponentToStore: function (type) {
        this.$store.commit('add', type);
        console.log("test");
        console.log(this.results.length);

      }

    },
    mounted: function() {
      // console.log(this.$route.query.bentoq);
      const id = this.$el.id;
      this.bentoSettings = drupalSettings.pdb.configuration[id];

      var bentoConfig = drupalSettings.pdb.configuration[id].clients[this.bentoSettings.bento_type] ? drupalSettings.pdb.configuration[id].clients[this.bentoSettings.bento_type].settings : [];
      axios
        .get('/api/search/' + this.bentoSettings.bento_type, {
          params: {
            query: this.$store.state.query,
            plugin_id: this.bentoSettings.bento_type,
            bento_limit: this.bentoSettings.bento_limit,
            bento_config: bentoConfig,
          }
        })
        .then(response => {
          console.log(response);
          this.results = response.data.records;
          this.total = response.data.total;

          this.addComponentToStore({
            title: this.bentoSettings.example_field,
            count: this.total
          });
        })
        .catch(error => {
          console.log(error.response);
        })
    }
  });
}


// I'm trying to call following function in Vue component.


function baseThemePagination1() {
  //Pagination
  pageSize = 3;

  var pageCount = $('.line-content').length / pageSize;

  for (var i = 0; i < pageCount; i++) {

    $('#pagin').append('<li><a href=\'#\'>' + (i + 1) + '</a></li> ');
  }
  $('#pagin li').first().find('a').addClass('current')
  showPage = function(page) {
    $('.line-content').hide();
    $('.line-content').each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();

    });
  }

  showPage(1);

  $('#pagin li a').click(function() {
    $('#pagin li a').removeClass('current');
    $(this).addClass('current');
    showPage(parseInt($(this).text()))

  });
}

1 Ответ

1 голос
/ 05 ноября 2019

То, что вы пытаетесь сделать, не является рекомендуемым способом использования vue, прямая манипуляция с DOM - это одна из вещей, которую vue старается избегать (хотя это можно сделать). В Vue можно связать значение, которое вы хотите, с переменной с v-model, предполагая, что это ввод, а затем создать пагинацию на основе этого.
Если вы настаиваете на манипулировании DOM, попробуйте ref="line-content" и затем вызовите егонапример, так:
this.refs.line-content.
С точки зрения реакции на изменение страницы, просто используйте метод в разделе «Методы», для этого нет причин использовать jQuery.
Смотрите простое объяснение здесь:https://medium.com/@denny.headrick/pagination-in-vue-js-4bfce47e573b

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...