Question

我想要一种方法来更新通过getter定义的属性的值。该属性获取HTML数据属性的值，方法mut只是将其递增1并在HTML中对其进行更新。单击按钮时将调用该方法。与下一次再次单击该按钮相比，我想使用getter重新定义属性的值，以获取数据属性的新值。但它不会发生。

该环境允许我使用jQuery，因为作为构造函数主要参数的'element'是一个表示该组件的HTML目标元素的jQuery对象。

这是代码：

import {Components} from 'MyCustomLibrary';

export default class Calendar extends Components{

   get CurrentMonth(){
      return this.element.data('calendar-currentmonth');
   }

   onClickHandler(){
      this.getNewCalendar(this.CurrentMonth);
   }

   getNewCalendar(month){
     /****
     /* jQuery substituted with Vanilla for suggestion in the comments
     $('[data-calendar-currentmonth]').data('calendar-currentmonth',month+1);
     ****/


     let dataAttributes = document.querySelectorAll('[data-calendar-currentmonth]');//.data('calendar-currentmonth',month+1);
     dataAttributes.forEach(function(e){
         e.setAttribute('data-calendar-currentmonth',parseInt(month)+1);
     });
   }

   constructor(element){
       super(element) //element is the html target of component, and it's a jQuery object

       this.element.on('click', this.onClickHandler.bind(this));
   }

}

在html中，我有一个按钮，该按钮是具有'data-calendar-currentmonth = 2'属性的锚标记。最初将其设置为2，比我第一次单击时，该函数更新属性，我可以通过控制台在html DOM中看到“ 3”。

但是，当我再次单击时，CurrentMonth的值再次为“ 2”，并且更多，html不再更新（可能只是因为属性值未更新，并且2 + 1始终为3）

不是应该在每次调用它所定义的属性时执行getter吗？那么，为什么在第二次调用HTML时却没有在HTML中获得新值呢？

Answer 1

实际上，我发现是由jQuery造成的混乱。我只是重新定义了Vanilla中的所有变量，所以效果很好。

我消除了get CurrentMonth语句，而只是在调用getNewCalendar时直接传递了它。

比我的代码更像这样：

 onClickHandler() {
    this.getNewCalendar(this.element[0].getAttribute('data-calendar-currentmonth'));
    /*** 'this.element' is actually a jQuery object. Calling element[0] it comes back to plain js ***/
 }

 getNewCalendar(month) {
    /****
    /* jQuery substituted with Vanilla for suggestion in the comments
    $('[data-calendar-currentmonth]').data('calendar-currentmonth',month+1);
    ****/

    let dataAttributes = document.querySelectorAll('[data-calendar-currentmonth]');//.data('calendar-currentmonth',month+1);
     dataAttributes.forEach(function(e) {
         e.setAttribute('data-calendar-currentmonth', parseInt(month) + 1);
     });
 }

 constructor(element) {
     super(element) // element is the html target of component, and it's a jQuery object

     this.element.on('click', this.onClickHandler.bind(this));
 }

ES6：如何使用getter和方法更新类中的属性

1 个答案: