title: VueJS dynamically update v-html content
body: <p>I'm trying to update a v-html binding using JS but I seem to be a bit stuck.
  Could anyone help?</p>
  
  <p>The idea of the code is that I have a list of items per page. And I want to create a pagination. Where the pagination numbers represent the <strong><em>current_page</em></strong></p>
  
  <p>The problem is that I'm trying to update the page number but I can't seem to get it to work.</p>
  
  <p>I've added this inside a jsfilde </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var configuration = {
    searchableFields: ['title', 'tags', 'actors'],
    sortings: {
      name_asc: {
        field: 'name',
        order: 'asc'
      }
    },
    aggregations: {
      tags: {
        title: 'Tags',
        size: 10
      },
      actors: {
        title: 'Actors',
        size: 10
      },
      genres: {
        title: 'Genres',
        size: 10
      }
    }
  }
  
  // the rows comes from external resources
  // https://github.com/itemsapi/itemsapi-example-data/blob/master/jsfiddle/imdb.js
  itemsjs = itemsjs(rows, configuration);
  var per_page = 3;
  var current_page = 1;
  
  var vm = new Vue({
    el: '#el',
    data: function() {
  
      // making it more generic
      var filters = {};
      Object.keys(configuration.aggregations).map(function(v) {
        filters[v] = [];
      })
  
      return {
        query: '',
        // initializing filters with empty arrays
        filters: filters,
      }
    },
    methods: {
      reset: function() {
        var filters = {};
        Object.keys(configuration.aggregations).map(function(v) {
          filters[v] = [];
        })
  
        this.filters = filters;
        this.query = '';
      }
    },
    computed: {
      searchResult: function() {
  
        var result = itemsjs.search({
          query: this.query,
          filters: this.filters,
          per_page: per_page,
          page: current_page
        })
        return result
      }
    }
  });
  
  var content = "";
  var active = "";
  var total = document.getElementById("pagination__total").value;
  var num_pages = Math.ceil(total / per_page);
  console.log(num_pages);
  for (var i = 1; i &lt;= num_pages; i++) {
    active = current_page == i ? "is-current" : "";
    content += `&lt;li class="pagination-link is-size-6 ${active}" data-page="${i}"&gt;${i}&lt;/li&gt;`;
  }
  document.querySelector(".pagination-list").innerHTML = content;
  content = "";
  
  
  let pagination = document.querySelectorAll(".pagination-link");
  for (let i = 0; i &lt; pagination.length; i++) {
    pagination[i].addEventListener("click", ev =&gt; {
      current_page = ev.target.getAttribute("data-page");
      console.log(current_page);
      vm.searchResult.page = current_page;
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/vue/latest/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/itemsapi/itemsjs/master/dist/itemsjs.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdn.rawgit.com/itemsapi/itemsapi-example-data/master/jsfiddle/imdb.js"&gt;&lt;/script&gt;
  &lt;div id="el"&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;a class="navbar-brand" href="#" v-on:click="reset()"&gt;ItemsJS movies&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="navbar"&gt;
          &lt;form class="navbar-form navbar-left"&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" v-model="query" class="form-control" placeholder="Search"&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class="container" style="margin-top: 50px;"&gt;
  
      &lt;input type="hidden" v-bind:value="searchResult.pagination.total" id="pagination__total"&gt;
      &lt;input type="hidden" v-bind:value="searchResult.pagination.page" id="pagination__curent-page"&gt;
      &lt;h1&gt;List of items ({{ searchResult.pagination.total }})&lt;/h1&gt;
  
      &lt;p class="text-muted"&gt;Search performed in {{ searchResult.timings.search }} ms, facets in {{ searchResult.timings.facets }} ms&lt;/p&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-md-2 col-xs-2"&gt;
          &lt;div v-for="facet in searchResult.data.aggregations"&gt;
            &lt;h5 style="margin-bottom: 5px;"&gt;&lt;strong style="color: #337ab7;" v-html="facet.title"&gt;&lt;/strong&gt;&lt;/h5&gt;
  
            &lt;ul class="browse-list list-unstyled long-list" style="margin-bottom: 0;"&gt;
              &lt;li v-for="bucket in facet.buckets"&gt;
                &lt;div class="checkbox block" style="margin-top: 0; margin-bottom: 0;"&gt;
                  &lt;label&gt;
                  &lt;input class="checkbox" type="checkbox" v-model="filters[facet.name]" v-bind:value="bucket.key"&gt;
                  {{ bucket.key }} ({{ bucket.doc_count }}) 
                &lt;/label&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-10 col-xs-10"&gt;
          &lt;div class="breadcrumbs"&gt;&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;!--&lt;h3&gt;List of items ({{ searchResult.pagination.total }})&lt;/h3&gt;--&gt;
          &lt;table class="table table-striped"&gt;
            &lt;tbody&gt;
              &lt;tr v-for="item of searchResult.data.items"&gt;
                &lt;td&gt;&lt;img style="width: 100px;" v-bind:src="item.image"&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;
                  &lt;b v-html="item.name"&gt;&lt;/b&gt;
                  &lt;br /&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;nav class="pagination is-centered" aria-label="pagination"&gt;
          &lt;div&gt;
            &lt;i class="pagination-previous is-size-6 fas fa-angle-double-left"&gt;&lt;/i&gt;
            &lt;ul class="pagination-list"&gt;&lt;/ul&gt;
            &lt;i class="pagination-next is-size-6 fas fa-angle-double-right"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
  
        &lt;div class="clearfix" style="margin-bottom: 100px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>