javascript 将数据值作为参数传入Vue.js

tcbh2hod  于 2023-06-20  发布在  Java
关注(0)|答案(2)|浏览(156)

我是Vue.js的新手。不确定如何将函数结果返回到数据值。
我有一个对象数组。每个都有数据和一个查询表达式。
我有两个功能:第一个改变请求表达式(字符串)并将其转换为有效的json,然后调用第二个函数(在那里我传递对象的数据)第二个-发送API请求,并在有效响应的情况下将其写入传递的数据。
我想动态地使用函数(我的意思是我有三个请求,但我想使用一个只改变请求的函数)。
代码:

new Vue({
    data: {
        dropList: [
            {
                label: "label_1",
                data: [],
                expresion: "expression_1"
            },
            {
                label: "label_2",
                data: [],
                expresion: "expression_2"
            }
        ],
        chartData: []
    },
    
    methods: {
        getDropListData() {
            
            this.dropList.forEach( value => {
                var config = {
                    expression: value.expresion,
                    applyDimensionRights: true,
                };
                this.getData(JSON.stringify(config), value.data);
            });
        },
        
        datasourceExecute() {

            var config = {
                expression: "expression_3",
                applyDimensionRights: true,
            };
            
            this.getData(JSON.stringify(config), this.chartData);
    
        },
        
        getData(payload, targetDataSetName) {
            var url = "url";
            this.sendRequest(
                url,
                "POST",
                payload,
                function (responseData) {
                  if (responseData.isOK) {

                    targetDataSetName = responseData.data;

                  } else {
                    this.makeToast(responseData.message, "danger");
                    console.log("Error getting data");
                  }
                }.bind(this)
            );  
        },

responseData就可以了。我在控制台中得到一个有效的响应。但数据并没有改变。

clj7thdc

clj7thdc1#

我想通了:我传递了一个引用,而不是一个值,因此没有对初始数据进行任何更改

w6lpcovy

w6lpcovy2#

你需要将data option声明为一个带有返回值的函数,而不是一个对象:

new Vue({
  data(){
    return {
      ...
    }
  }
})

相关问题