re-render template in vuejs

Question

I'm new in vue.js .

So i'm trying to figure out how can I make data property value change in every click event.

So here's my HTML code

<script type="text/html" id="tmpl-slice-<?php echo $slice_name; ?>">
            <div class="slice-type-area slice-type-<?php echo $slice_name; ?> slice-type-<?php echo $slice_name; ?>-{{ slice_count }} p-3 mb-3">
                <div class="slice-top">
                    <div class="d-flex align-items-center">
                        <h5 class="mb-0">{{ slice_title }}</h5>
                        <div class="ml-auto">
                            <button class="btn btn-warning rounded-circle btn-sm remove-slice" data-remove=".slice-type-<?php echo $slice_name; ?>-{{ slice_count }}"><i class="fas fa-times fa-sm"></i></button>
                        </div>
                    </div>
                </div>
                <div class="my-3"></div>

                <div class="form-group">
                    <input type="text" name="slice[{{ slice_type }}][{{ slice_count }}][title]" class="form-control rounded-0"/>
                </div>


                <div class="form-group">
                    <textarea class="tinymce-area" id="tinymce-{{ slice_type }}-desc-{{ slice_count }}" name="slice[{{ slice_type }}][{{ slice_count }}][desc]"></textarea>
                </div>
                ?>
            </div>
</script>

And this my js code

$(document).on("click", ".add-slice", function(e) {
  var t = $(this);
  var slice_title = t.data("title");
  var slice_type = t.data("type");
  var slice_count = $(".slice-type-" + slice_type + "").length;

  slice_count += 1;
  console.log(slice_count);
  var slice = new Vue({
    el: '#tmpl-slice-' + slice_type + '',
    data: {
      slice_title: slice_count,
      slice_type: slice_type,
      slice_count: slice_count
    },
  });

  $("#get_slices").prepend($("#tmpl-slice-" + slice_type + "").html());
  // Apply tinymce Editor to textarea elements
  tinyMCE.execCommand('mceAddEditor', true, "tinymce-" + slice_type + "-desc-");

  e.preventDefault();
});

So my problem is is var slice_count should add 1 to the results got from count slice type element but when render the value not changed always be 1 first value got from first render

Answer 1

Each time you clicking the button you are creating new Vue instance & rewriting existing DOM element programmatically but your DOM element is not re-rendering because reactivity works for vue instance if you keep vue instance out of that click event. this practice works for jQuery but not in Vue instance.

Vue using virtual DOM management for re-rendering. Better I suggest avoid jQuery, Vue smart enough to work in two-way binding for its prop in html.

If you want to develop your code in vue then you must follow below link.its very easy & organized for beginners.

https://v2.vuejs.org/v2/guide/

https://012.vuejs.org/guide/

you can start your app https://medium.com/@BMatt92656920/getting-started-with-vue-webpack-bootstrap-fb69b24e6f3d

you can get lots of UI stuff here https://madewithvuejs.com/