vue3 使用vue2组件 this.$set

vue3中使用组件的方式与vue2略有不同，所以不能直接使用this.$set方法。在vue3中，可以通过`reactive`函数和`ref`函数来实现响应式的数据绑定。

1. 使用`reactive`函数：

import { reactive } from 'vue';

export default {
  setup() {
    const obj = reactive({
      a: 1,
      b: 2
    });

    function fn() {
      obj.c = 3;
    }

    return {
      obj,
      fn
    };
  }
}

2. 使用`ref`函数：

import { ref } from 'vue';

export default {
  setup() {
    const obj = ref({
      a: 1,
      b: 2
    });

    function fn() {
      obj.value.c = 3;
    }

    return {
      obj,
      fn
    };
  }
}

相关问题

this.$axios({ url: `/api/login`, method: 'post', data: { ...this.formLabelAlign } }).then(res => { let resData = res.data.data // debugger if (resData != null) { //获取头像信息 var cid = resData.userId; var role = resData.role; this.$axios.get(`/api/user/info/img/${cid}/${role}`).then(res => { if (res.data.code === 200) { this.$cookies.set("userImg", res.data.data) } switch (role) { case 0: //管理员 this.$cookies.set("cname", resData.name) this.$cookies.set("cid", resData.userId) this.$cookies.set("role", 0) this.$router.push({ path: '/admin' }) //跳转到首页 break case 1: //教师 this.$cookies.set("cname", resData.name) this.$cookies.set("cid", resData.userId) this.$cookies.set("role", 1) this.$router.push({ path: '/index' }) //跳转到教师用户 break case 2: //学生 this.$cookies.set("cname", resData.name) this.$cookies.set("cid", resData.userId) this.$cookies.set("role", 2) this.$router.push({ path: '/student' }) break } })

这段代码是一个 Vue.js 的组件中的一个方法，用于处理用户登录的逻辑。在该方法中，使用 this.$axios 发起一个 POST 请求到 `/api/login` 接口，并将 `this.formLabelAlign` 对象作为请求体发送。如果请求成功，将会在响应中获取到用户信息（如用户 ID、角色等），然后再使用 this.$axios 发起另一个 GET 请求获取用户头像信息，并将其存储到浏览器的 Cookie 中。最后，根据用户角色的不同，通过 this.$cookies.set 设置不同的 Cookie 信息，并使用 this.$router.push 跳转到不同的页面。如果用户角色为管理员，则跳转到首页；如果用户角色为教师，则跳转到教师用户页面；如果用户角色为学生，则跳转到学生页面。

vue中使用this.$set报错_this15.$set is not a function

### 回答1：
在Vue中使用this.$set(obj, key, value)方法是为了在响应式地更新对象时，能够添加新的属性而不影响数据的响应式更新。但是，当报错_this15.$set is not a function时，通常有以下几个可能的原因和解决办法：

1. Vue版本较低：请确保你的Vue版本是2.3.0及以上。因为在这个版本之前，Vue中的this.$set()方法并不是默认自带的。可以通过查看Vue的版本号来确认是否符合要求。

2. this指向错误：在Vue组件中，确保你在正确的作用域内使用了this.$set()方法。如果是在组件的回调函数或者异步操作中使用，可能会导致this指向发生变化。

3. 被操作的对象不是响应式的：this.$set()只能在响应式的对象上使用，如果传入的对象不是响应式的，会导致报错。可以使用Vue.set()方法或直接在data中声明对象的方式将其转变为响应式对象。

4. Vue的实例被重写：如果在Vue实例被重写之后再使用this.$set()方法，会导致报错。在Vue实例被重写之前或在Vue组件中正常使用this.$set()方法。

综上所述，要解决_this15.$set is not a function报错，首先确保Vue版本符合要求，然后确认使用this.$set()的作用域正确并且被操作的对象是响应式的。如果问题仍未解决，可以进一步检查是否重写了Vue实例。

### 回答2：
当在Vue中使用this.$set报错_this15.$set is not a function时，通常是因为this指向不正确或者Vue实例没有正确地初始化。

首先，确保你的Vue实例已经成功创建，并且在使用this.$set之前已经完成了初始化。一般情况下，Vue实例的初始化应该在created或mounted钩子函数中完成。

其次，检查this指向是否正确。在Vue组件中，你可以在methods中定义方法，而在方法中使用this来访问Vue实例。如果你有一个异步操作或者回调函数，并且需要在回调函数中使用this.$set，那么在回调函数中可能会丢失正确的this指向。为了确保this指向正确，你可以在异步回调函数之前将this存为一个变量。

示例代码如下：

export default {
  data() {
    return {
      message: "Hello Vue!"
    }
  },
  created() {
    // Vue实例初始化
    // 这里你可以进行一些初始化操作
  },
  methods: {
    updateMessage() {
      // 在回调函数之前存储正确的this指向
      const self = this;
      // 异步操作或者回调函数
      someAsyncOperation(function(response) {
        // 在回调函数中使用正确的this指向
        self.$set(self, 'message', response.data);
      });
    }
  }
}

通过以上方法，你应该能够成功使用this.$set来更新Vue实例中的数据，而不再遇到_this15.$set is not a function的错误。

### 回答3：
在Vue中使用this.$set工具函数来动态修改响应式数据时，出现_this15.$set is not a function_的报错通常是因为this.$set函数的调用方式不正确或者Vue版本过低导致的。

首先，确保你正在使用的是Vue 2.x版本，因为在Vue 1.x版本中并没有this.$set这个函数。

其次，this.$set函数是用来给Vue实例添加响应式属性的，所以调用时需要传入三个参数，分别是对象本身、属性名和属性值。例如：

this.$set(this.obj, 'prop', value)

其中，this.obj是你想要添加属性的对象，'prop'是属性名，value是新的属性值。

另外，如果你在自定义组件的方法中使用this.$set，需要保证this指向当前组件实例。如果方法是通过普通的函数定义，可能会导致this指向错误。为了确保this指向正确，可以使用箭头函数或者使用bind()方法来绑定this。例如：

methods: {
  updateProp: function(value) {
    this.$set(this.obj, 'prop', value)
  }
}

或者使用箭头函数：

methods: {
  updateProp: (value) => {
    this.$set(this.obj, 'prop', value)
  }
}

总结一下，要解决_this15.$set is not a function_的报错，需要确保使用的是Vue 2.x版本，并且调用this.$set函数时传入正确的参数，并且保证this指向正确。