Question

我正在创建一个通用的httpService文件，将从中调用我的所有http调用。并且在http状态403中，我想重定向到“ / profile”路由。重定向后显示错误

[Vue警告]：数据中已经定义了计算的属性“ errors”。

位于

--->位于resources / js / components / Admin / Profile.vue

似乎是数据声明冲突。

httpservice.js

getRequest: function (parameters,callBackFunction) {
    let response = '';
    let url = 'url' in parameters ? parameters["url"] : "";
    let data = 'data' in parameters ? parameters['data'] : "";
    axios
    .get(url,{
        params:data
    }).then(data    =>  {
        if(data.status == 200){
            response = data.data.data;
            callBackFunction(response);
        }
    }).catch(error  =>  {
        if(error.response.status == 403){
            console.log(router);
            router.push({path: '/profile'});
        }
    });
}

profile.vue

data() {
    return {
    errors: [],
    form: new Form({
    password: "",
    new_password: "",
    confirmed_password: ""
}

Answer 1

不，不是那么复杂。

Computed properties取决于数据属性中定义的值。这些属性将直接扩展/分配给Vue实例（以便您可以调用this.errors）。

因此，您不能在data和computed对象中重复使用相同的属性名称。因为重用该名称意味着将覆盖现有数据，这意味着计算值不再依赖于数据值。

在您的代码中，您仅显示：

data() {
    return {
    errors: [],
    form: new Form({
    password: "",
    new_password: "",
    confirmed_password: ""
}

根据错误：

[Vue警告]：数据中已经定义了计算的属性“ errors”。

我相信你也写过类似的东西：

computed: {
  ...
  errors: function(){}
  ...
}

在Profile.vue中也

。只需更改其中一个名称即可解决您的问题。

编辑

演示问题：

new Vue({
  el: '#app',
  data(){
    return {
      errors: [
        'error 1',
        'error 2'
      ]
    }
  },
  computed: {
    errorString(){
      return `Errors: ${this.errors.join(', ')}.`
    }
  },
  template: `<div id="app">{{errorString}}</div>`
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

上面的方法工作正常，而下面的方法会导致意外的结果，并且收到相同的Vue警告：

new Vue({
  el: '#app',
  data(){
    return {
      errors: [
        'error 1',
        'error 2'
      ]
    }
  },
  computed: {
    errors(){
      return `Errors: ${this.errors.join(', ')}.`
    }
  },
  template: `<div id="app">{{errors}}</div>`
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

使用router.push重定向到另一个路由时，变量声明冲突

1 个答案: