vue计算属性里的值为什么传不到后台

Vue的计算属性只是用于计算和返回一个新的属性值，它并不会直接传递到后台。计算属性是为了方便在模板中使用，而不是用于与后台交互的。

如果想将计算属性的值传递到后台，你可以通过方法来实现。在Vue实例中定义一个方法，该方法可以获取计算属性的值，并将其传递给后台。

具体的步骤如下：

1. 在Vue实例中定义一个计算属性，用于计算需要传递给后台的值。

2. 在Vue实例中定义一个方法，该方法通过调用计算属性来获取其值，然后将该值传递给后台。

3. 在合适的时机调用该方法，以实现将计算属性的值传递到后台。

下面是一个简单示例：

new Vue({
  data: {
    value1: 10,
    value2: 20
  },
  computed: {
    sum: function () {
      return this.value1 + this.value2;
    }
  },
  methods: {
    sendDataToBackend: function () {
      // 调用计算属性获取值
      var sum = this.sum;
      
      // 将值传递给后台，可以使用Ajax或其他方式发送请求
      // 例如：
      // axios.post('/api/sum', { sum: sum })
      //   .then(function (response) {
      //     console.log(response.data);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
    }
  }
});

在上面的示例中，sum是一个计算属性，它计算了value1和value2的和。sendDataToBackend方法通过调用sum计算属性来获取其值，并将其传递给后台。

需要注意的是，具体的后台传递操作需要根据你的实际情况来调整。以上只是一个简单的示例，你可以根据自己的需求来实现具体的后台传递逻辑。

1. 计算属性是用于处理数据的衍生属性，在Vue中仅在前端进行计算和展示，并不直接与后台交互。所以计算属性的值并不会直接传到后台。

2. 后台是指服务器端，在前端通过计算属性得出的值并不会自动发送到服务器。如果需要将计算属性的值发送到后台，需要使用Ajax或者其他方式将该值单独作为请求参数发送到服务器端。

3. Vue的计算属性主要用于对已有的数据进行计算和处理，生成一个新的属性值供前端使用，对于与后台的数据交互，通常使用Vue的实例属性data中的数据或者使用Vue的自定义方法。

4. 在Vue中，可以通过监听数据的变化，使用watch属性来触发相应的后台请求。当计算属性所依赖的数据发生变化时，可以在watch中进行相应的处理，并将计算属性的值发送到后台。

5. 在Vue中，可以使用methods方法来定义与后台交互的函数，该函数可以在计算属性中调用。在该方法中，可以通过发送Ajax等方式将计算属性的值传递到后台进行处理。

总的来说，计算属性的值并不会直接传到后台，而是用于前端页面的展示和计算，如果需要将计算属性的值发送到后台，需要使用其他方式来实现。

在Vue中，计算属性（computed）是将数据的计算逻辑封装起来，以便我们可以在模板中使用它们。计算属性是基于它们的依赖进行缓存的，只有在依赖发生改变时，才会重新计算。

当我们在计算属性中定义了一个值，如果想将这个值传递到后台，需要通过一些特定的方法去实现。下面将详细介绍一种可行的方法。

假设我们有一个名为"computedValue"的计算属性，储存了我们需要传递到后台的值。

方法一：使用axios发送数据

1. 安装axios

首先，在项目中安装axios。在命令行中运行以下命令：

npm install axios --save

2. 引入axios及其他所需参数

在需要使用axios的组件中，通过import引入axios，并引入其他所需参数。

import axios from 'axios';

export default {
  data() {
    return {
      // 其他数据
    }
  },
  computed: {
    computedValue() {
      // 计算属性的逻辑
    }
  },
  methods: {
    sendData() {
      // 发送数据的方法
    }
  }
}

3. 编写发送数据的方法

在Vue组件中，编写一个发送数据的方法，将计算属性的值传递到后台。

methods: {
  sendData() {
    axios.post('/api/your-url', { value: this.computedValue })
      .then(response => {
        // 请求成功后的逻辑
      })
      .catch(error => {
        // 请求失败后的逻辑
      });
  }
}

在这个例子中，我们使用了axios的post方法发送请求。/api/your-url是后台的API接口地址，{ value: this.computedValue }是要传递给后台的数据，这里使用了计算属性computedValue的值。

这样，我们就可以通过调用sendData()方法来将计算属性的值传递到后台了。

方法二：使用Vue-resource发送数据

Vue-resource是Vue.js官方推荐的发送AJAX请求的插件。使用Vue-resource发送数据的步骤如下：

1. 安装Vue-resource

首先，在命令行中运行以下命令来安装Vue-resource：

npm install vue-resource --save

2. 引入Vue-resource及其他所需参数

在需要使用Vue-resource的组件中，通过import引入Vue-resource，并引入其他所需参数。

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

export default {
  data() {
    return {
      // 其他数据
    }
  },
  computed: {
    computedValue() {
      // 计算属性的逻辑
    }
  },
  methods: {
    sendData() {
      // 发送数据的方法
    }
  }
}

3. 编写发送数据的方法

在Vue组件中，编写一个发送数据的方法，将计算属性的值传递到后台。

methods: {
  sendData() {
    this.$http.post('/api/your-url', { value: this.computedValue })
      .then(response => {
        // 请求成功后的逻辑
      })
      .catch(error => {
        // 请求失败后的逻辑
      });
  }
}

在这个例子中，我们使用了Vue-resource的post方法发送请求。/api/your-url是后台的API接口地址，{ value: this.computedValue }是要传递给后台的数据。

这样，我们就可以通过调用sendData()方法来将计算属性的值传递到后台了。

注意事项

无论是使用axios还是Vue-resource发送数据，需要注意以下事项：

• 需要根据后台API的要求，来设置请求数据的格式和参数。
• 需要处理请求成功后的逻辑和请求失败后的逻辑。

希望以上方法能帮助到你，如果问题还未解决，请提供更多的细节，以便我们更好地帮助你解决问题。