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应该在从count slice类型元素获得的结果中加1，但是当渲染值未改变时始终是1从第一个渲染得到的第一个值

Answer 1

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

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

如果要在vue中开发代码，则必须遵循下面的链接。它非常简单且适合初学者。

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

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

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

您可以在此处获得很多UI内容 https://madewithvuejs.com/

在vuejs中重新渲染模板

1 个答案: