Question

我正在尝试在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()))

  });
}

Answer 1

您不尝试使用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

如何在Vue js组件中添加javascript分页代码

1 个答案: