如何通过Vue动态给对象添加属性及其实例演示？

本文共计429个文字，预计阅读时间需要2分钟。

一、背景+介绍：在Vue中，当请求接口时，一个请求方法可能需要响应后台的两个不同请求接口。因此，我们需要先设置共同的请求参数，然后根据条件动态添加参数属性。

二、案例：javascript// 假设有一个请求方法，需要根据条件动态添加参数methods: { fetchData() { // 设置共同的请求参数 const commonParams={ userId: '123', token: 'abc123' };

// 根据条件动态添加参数属性 if (this.someCondition) { commonParams.extraParam='extraValue'; }

// 发起请求 axios.get('api/endpoint1', { params: commonParams }) .then(response=> { console.log('Response from endpoint1:', response); }) .catch(error=> { console.error('Error from endpoint1:', error); });

axios.get('api/endpoint2', { params: commonParams }) .then(response=> { console.log('Response from endpoint2:', response); }) .catch(error=> { console.error('Error from endpoint2:', error); }); }}

一、背景

介绍：在vue中请求接口中，一个请求方法可能对应后台两个请求接口，所以请求参数就会有所不同。需要我们先设置共同的参数，然后根据条件动态添加参数属性。

二、案例

let that = this; let params = { "type":that.addQueTable.type, "discussTitle":that.addQueTable.discussTitle, }; // 区分普通题库还是模考题库 let addQuestionApi = ''; if(that.questionTypes == 0){ // 动态设置vue对象参数 Vue.set(params,'charpterId',that.charpterIds) addQuestionApi = api.saveBgInfoQuestion; }else{ Vue.set(params,'mockexamSectionId',that.charpterIds); addQuestionApi = api.saveMockQuestion; } that.$refs.addQueTable.validate((valid) => { if(valid){ that.$axios({ url:addQuestionApi, method: "post", data: qs.stringify(params), headers: { "Content-Type": "application/x-www-form-urlencoded" } }).....

三、使用介绍

// 1、页面导入Vuejs文件库 import Vue from 'vue' // 2、Vue.set即可，按照上面方式

以上这篇vue给对象动态添加属性和值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。