Question

我有以下代码：

{
  data: function ()  {
    return {
      questions: [],
      sendButtonDisable: false,
    }
  },

  methods: { 
    postQuestionsContent: function () {
      var that = this;
      that.sendButtonDisable = true;
    },
  },
},

调用sendButtonDisable时，我需要将postQuestionsContent()更改为true。我发现只有一种方法可以做到这一点;与var that = this;。

有更好的解决方案吗？

Answer 1

如果你没有在里面定义另一个范围，你可以访问内部方法：

this.sendButtonDisable = true;

但是如果你在函数中有一个范围，那么在vue中是函数开头的一个名为vm（代表视图模型）的变量的常见用法，然后只需在任何地方使用它：

vm.sendButtonDisable = false;

vm中也可以看到data: function () { return { questions: [], sendButtonDisable : false } }, methods: { postQuestionsContent : function() { // This works here. this.sendButtonDisable = true; // The view model. var vm = this; setTimeout(function() { // This does not work, you need the outside context view model. //this.sendButtonDisable = true; // This works, since wm refers to your view model. vm.sendButtonDisable = true; }, 1000); } }的示例。

完整示例：

(cond-> opts (something) (merge {:a b}))

Answer 2

这取决于您如何调用postQuestionsContent方法（如果您异步调用它，则可能需要bind this上下文。）

在大多数情况下，您应该可以使用this.$data.YOURPROPNAME访问它，在您的情况下this.$data.sendButtonDisable：

data: function ()  {
  return {
     questions: [],
     sendButtonDisable : false
  }

  },

  methods: 
  { 
     postQuestionsContent : function()
     {
        this.$data.sendButtonDisable = true;
     }
  }

Answer 3

试试这个

...
methods: 
{ 
   postQuestionsContent ()
   {
      this.sendButtonDisable = true;
   }
}

以上述方式注册您的方法应该可以解决问题。

从方法访问数据的Vue方式是什么？

3 个答案: