在 vuejs 中重新渲染模板

Question

我是 vue.js 的新手。

所以我想弄清楚如何在每次点击事件中更改数据属性值。

所以这是我的 HTML 代码

<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>

这是我的 js 代码

$(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();
});

所以我的问题是 var slice_count应该将 1 添加到从 count 切片类型元素获得的结果中，但是当渲染时值不改变总是 1 从第一次渲染获得的第一个值

Answer 1

每次单击按钮时，您都是在创建新的 Vue 实例并以编程方式重写现有的 DOM 元素，但您的 DOM 元素不会重新渲染，因为如果您将 vue 实例排除在该单击事件之外，则反应性适用于 vue 实例。 这种做法适用于 jQuery，但不适用于 Vue 实例。

Vue 使用虚拟 DOM 管理进行重新渲染。 更好的是，我建议避免使用 jQuery，Vue 足够聪明，可以在 html 中为其 prop 进行双向绑定。

如果你想在 vue 中开发你的代码，那么你必须按照下面的链接。它对初学者来说非常简单和有条理。

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

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

您可以启动您的应用程序https://medium.com/@BMatt92656920/getting-started-with-vue-webpack-bootstrap-fb69b24e6f3d

你可以在这里得到很多 UI 的东西https://madewithvuejs.com/