I have this simple function

displayAttributeNameBasedOnId(id) {

    axios.defaults.headers['Content-Type'] = 'application/json'
    let data = {
        $root: 'vc_rule_attribute',
        op: 'read',
        brand: localStorage.getItem('brandCode'),
        selection: {
            filters: ['id:'   id]
        },
        _SESSION: localStorage.getItem('session')
    }
    axios.post(window.MTS_URL, data).then((response) => {
        return response.data.rule_attributes[0].name
    })
},

It will displayAttributeNameBasedOnId.

I think I am facing race condition issue. I can see the result of the console.log(), but It's not displaying in the table.

<td>{{ displayAttributeNameBasedOnId(item.attribute_id) }}</td>

In my table, I call that function.

How can I make sure to wait for the axios to be done ?

Try #2

async displayAttributeNameBasedOnId(id) {
        console.log('displayAttributeNameBasedOnId', id)

        axios.defaults.headers['Content-Type'] = 'application/json'
        let data = {
            $root: 'vc_rule_attribute',
            op: 'read',
            brand: localStorage.getItem('brandCode'),
            selection: {
                filters: ['id:'   id]
            },
            _SESSION: localStorage.getItem('session')
        }
        await axios.post(window.MTS_URL, data).then((response) => {
            console.log('response.data', response.data)
            return response.data.rule_attributes[0].name
        })
    },

I got

CodePudding user response：

My solution is to get attributeNames for ids in the table on mounted or created hook, and then get attributeName for specific id in methods based on attributeNames

CodePudding user response：

I think your function displayAttributeNameBasedOnId returns nothing on your try #2 can you add a return statement:

  return await axios.post(window.MTS_URL, data).then((response) => {

let us know if it worked !