改变vue请求过来的数据中的某一项值的方法(详解)

下面我将详细讲解改变 Vue 组件请求过来的数据中的某一项值的方法。

确定需要修改的数据

首先我们需要确定需要修改的数据，可以通过在 Vue 组件的 mounted 或 created 钩子中打印请求到的数据，查看需要修改的数据具体位置。比如下面这个例子：

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    axios.get('/api/user/1').then(res => {
      console.log(res.data)
      this.user = res.data
    }).catch(err => {
      console.error(err)
    })
  }
}

在控制台打印出来的数据中，我们发现需要修改的是 this.user.name，那么我们就可以针对这个属性进行修改了。

使用 Vue.set 或 this.$set 方法

Vue 提供了两种方法可以修改组件中的响应式数据，分别是 Vue.set 和 this.$set 方法。

Vue.set

使用 Vue.set 方法，我们需要传入需要修改的对象、属性名、和新的值：

import Vue from 'vue'
Vue.set(this.user, 'name', 'newName')

this.$set

使用 this.$set 方法，我们可以直接在组件实例中调用：

this.$set(this.user, 'name', 'newName')

当然，Vue.set 和 this.$set 方法是等价的，都可以达到同样的效果。

示例

下面是一个完整的示例，展示了如何使用 Vue.set 方法修改响应式数据。

<template>
  <div>
    <p>{{ user.name }}</p>
    <button @click="changeName">修改名称</button>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    axios.get('/api/user/1').then(res => {
      this.user = res.data
    }).catch(err => {
      console.error(err)
    })
  },
  methods: {
    changeName() {
      Vue.set(this.user, 'name', 'newName')
    }
  }
}
</script>

在这个示例中，我们通过点击按钮触发了 changeName 方法，在这个方法中调用了 Vue.set 方法，将用户的名称修改为 newName。

希望这个攻略能够帮助你解决问题。