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