Vue.js 3 - 通过计算属性启用/禁用表单元素

Question

我正在使用 Vue.js 3 并尝试在 ajax 发布期间禁用表单元素，然后在发布完成后再次启用它们（无论成功与否）。

开始提交时将 isFormSubmitting 属性设置为 true。我遇到的问题是将其设置回 false 会使元素禁用。

这是我绑定到 disabled 属性的方式

<textarea v-bind:disabled='isFormDisabled' v-bind:value="model.description" class="form-control" rows="6"></textarea>

这是脚本：

<script type="text/javascript">

    const App = {
        data() {
            return {
                model: @(Html.Raw(Model.Json)),
                isFormSubmitting: false
            }
        },
        computed: {
            isFormDisabled: function () {
                return this.isFormSubmitting;
            }
        },
        methods: {
            processData() {

                this.isFormSubmitting = true;

                var json = JSON.stringify(this.model);

                console.log('isFormDisabled = ' + this.isFormDisabled);

                $.post(
                    {
                        url: '@Url.Action("SaveNewTicket", "DriverTickets")',
                        data: json,
                        success: function ()
                        {
                            console.log('submitted');
                            this.isFormSubmitting = false;
                            console.log('isFormDisabled = ' + this.isFormDisabled);
                        },
                        fail: function ()
                        {
                            console.log('failed');
                            this.isFormSubmitting = false;
                            console.log('isFormDisabled = ' + this.isFormDisabled);
                        },
                        done: function ()
                        {
                            console.log('done');
                            this.isFormSubmitting = false;
                            console.log('isFormDisabled = ' + this.isFormDisabled);
                        }
                    });
            },
        }
    }

    const app = Vue.createApp(App);
    const vm = app.mount('#app');

</script>

这是我的控制台输出：

isFormDisabled = true
submitted
isFormDisabled = undefined

我也尝试过直接绑定到一个属性。当我这样做时，我从输出中得到 false 而不是 undefined，但 disabled 属性仍保留在表单上。

诚然，我不是一个很好的前端开发人员，因此也欢迎与问题本身无关的批评。

Answer 1

正如@shob 已经指出的那样，它最有可能不起作用的原因是您使用function(){} 表示法而不是使用()=>{} 来声明ajax 回调

人们误解它们是可以互换的，但事实并非如此。 ()=>{} 的作用相当于function(){}.bind(this)，即将函数的上下文绑定到当前上下文。这也是为什么您不能将箭头函数用于计算之类的事情，因为 this 上下文预计来自调用者。无论如何，您可以修复它，最好使用箭头函数（主要是为了更好的可读性），或者如果您对箭头函数定义不满意，可以添加 bind(this)。

const App = {
  data() {
    return {
      model: @(Html.Raw(Model.Json)),
      isFormSubmitting: false
    }
  },
  computed: {
    isFormDisabled: function () {
      return this.isFormSubmitting;
    }
  },
  methods: {
    processData() {

      this.isFormSubmitting = true;

      var json = JSON.stringify(this.model);

      console.log('isFormDisabled = ' + this.isFormDisabled);

      $.post(
        {
          url: '@Url.Action("SaveNewTicket", "DriverTickets")',
          data: json,
          success: function ()
          {
            console.log('submitted');
            this.isFormSubmitting = false;
            console.log('isFormDisabled = ' + this.isFormDisabled);
          }.bind(this),
          fail: function ()
          {
            console.log('failed');
            this.isFormSubmitting = false;
            console.log('isFormDisabled = ' + this.isFormDisabled);
          }.bind(this),
          done: function ()
          {
            console.log('done');
            this.isFormSubmitting = false;
            console.log('isFormDisabled = ' + this.isFormDisabled);
          }.bind(this)
        });
    },
  }
}

const app = Vue.createApp(App);
const vm = app.mount('#app');