How to change contents of a column in each row of a table without using a props in Vue.js (Element-ui)?

Question

I am stuck on this problem from quiet sometime. I have created a table with 3 columns out of which the for two columns I can use prop property to display the contents of each row for those two columns. Now, for the third column, I want to display contents from another array, how do I display this information in the third column.

Please find the example of the code below:

This is the HTML Code

<el-table :data = "data_table">

<el-table-column
prop = "Id"
label= "Unique ID">
</el-table-column>

<el-table-column
prop = "color"
label = "Color">
</el-table-column>

<el-table-column
prop = ""
label = "Count">

  <template slot-scope="scope">

      <el-button type="text" @click="dialogVisible = true; get_total_count_users(scope.row)">{{users.length}}</el-button>
      <!--Skipping the code for dialog box..I have tested that part pretty well, so I know it works. -->

  </template>

</el-table-column>

</el-table>

This is the javascript part of the code:

<script>

export default {

  data(){
    return{
    data_table:[], // I fill the data_table array using some AJAX/Axios calls which has props Id and Color. 
    users: [], // I fill the users array using some AJAX/Axios calls which has multiple user information. 

};
},

methods:{
   get_total_count_users(row){
// axios call, etc. This part works successfully, I checked the values. 
}
}
</script>

A little explanation for the above code: I make an AJAX/Axios call to an API which return me a list/array of value in data-table array. It had two props in it, that is Id and Color. I make another axios/AJX call to an api which returns me the list of the users based on the Id present on that row of the table. Each row will have a unique Id. Using that Id, I make an axios call to an api .. example, www.example/{{Id}}.com .This returns me a list of users linked to that id. Now, my next task is to display the total users (by taking the length of the users array) and displaying it as a button. But, as I am not using prop to display the values (length of users array for each row), the value in the button is displayed the same through all the rows. It keeps changing for the entire column if I click a button on any of the rows.

get_total_count_users(scope.row) function is used to make an axios/AJAX call to www.example/{{Id}}.com and stores multiple user information tied with that Id in users array.

Please refer to the image below:

Initially, all values are 0, as the Id in the first row has 0 users attached to it.

When I click on the 3rd rows button (which initially has 0 in it), all the values in that column change to 2, as the Id in the 3rd row has two users tied to it.

Hence, the issue here is that, I simply want to display total number of users (count) each row based on that id without using the prop property.

Hope the above explanation and example is helpful to understand the problem. Any help would be appreciated.

Answer 1

The answer will solve the problem but is not a specific solution that is defined to get data from multiple arrays into your data table.

You can chain your axios responses and then use a foreach to add the variables to your object inside array. So I am assuming that you are calling a method on mount like this:

data: () => ({ tableData: [] }),
mounted() {
  this.getData();
}

now within your getData() function make different axios calls and put your response into the table, with something like this.

methods: {
  getData() {
    var myTableData = [];
    axios({ method: 'GET', url: 'http://first-url', headers: [...] }).then(res => {
      //we have got the table data here
      myTableData = res.data;
      //looping through data and making axios calls based on data.
      myTableData.foreach((row, index) => {
        var newUrl = 'https://getdatafrom.com/'+ row.id+'/'; //using the data from previous call.
        axios({ method: 'GET', url: newUrl, headers: [...]}).then(res2 => {
        var counts = res.data; 
         // adding variable myCount to the table data array.
         row.myCount = counts[index];
       }).catch(err => { console.error(err)})
     })
        // setting data object 
        this.tableData = myTableData;
    }).catch(err => { console.error(err) })
  }
}

let me know if you have any issue.