Question

这可能是一个简单的问题，但是我觉得需要澄清一下...我的网站的单个页面上正在运行vuejs。 vm应用程序正在页面的页脚脚本中运行（我没有使用app.js文件或模板/组件等）

在我的一种vue方法中，这很好用：

newContainer(){
   this.attribute = 'value'; //this works!
}

我也在使用axios，而在其功能内部，我必须这样做：

axios.post('my/route', {
        attribute: this.attribute //this works
    }).then(function (response) {
        vm.attribute = 'value'; //this works
        this.attribute = 'value'; //this does not work
    });

我意识到这可能是由于this.attribute在vm.attribute起作用的情况下不起作用。但是...为什么会这样，还有更好的方法吗？

Answer 1

您可以在代码后看到以下内容

    export default{
        data(){
            return{
                title:"Form Register",
                formdata:{},
                message:"",
                success:0,
            }
        },
        methods:{
           register(){
                this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
                       console.log(response);
                       if(response.data.success>0){
                           this.message="You register success";
                           this.success=response.data.success;
                       }
                       else{
                           this.message="Register to failed";
                           this.success=response.data.success;
                       }
                  });
                    
            },
 
        }
    }

Answer 2

如果您使用() => {...}之类的箭头功能，它将绑定当前上下文。 this将指向正确的上下文。因此，如果您使用它而不是未绑定上下文的function() {...}，它将起作用。喜欢

.then(response => {this.attribute = 'value'}

Answer 3

这是开发人员真正常见的绊脚石。原因是在axios函数内部，您的代码超出了包含axios方法调用的对象的范围。如果您像下面的代码那样重写此代码块，则可以更容易地看出这一点：

 var vm = {
      function doWork(){
        axios.post('my/route', {
              attribute: this.attribute //this works
        }).then(function (response) {
              vm.attribute = 'value'; //this works
              this.attribute = 'value'; //this does not work
         });
      }
 }

在功能上等同于：

 var vm = {
      function doWork(){
          axios.post('my/route', {
                attribute: this.attribute //this works
           }).then(followOnWork(response));
      }
 }

 function followOnWork(response){
      vm.attribute = 'value'; //this works
      this.attribute = 'value'; //this does not work
 }

您可以在此重构代码中看到，followOnWork的运行完全独立于vm对象。因此，在this中使用followOnWork变量将不会与vm对象相关。其中vm是对象的实际名称，一旦创建了对象，就可以通过vm变量从任何地方对其进行访问。

如果您可以选择使用ES6，则可以使用箭头功能（如@MakarovSergey所述）来解决“超出范围”的问题。

vm.attribute与this.attribute

3 个答案: