Возвращаемое значение от ajax в vuejs

Question

Я пытаюсь передать целое число (id) в функцию, которая вызывает API. Затем API проверяет, соответствует ли переданный идентификатор каким-либо данным в базе данных, и возвращает имя, связанное с этим идентификатором. Я использую vue. js для этого вдоль стороны laravel. Ниже приведен мой код.

<tr v-for="store in storeList" :key="store.id">
                    <td>{{ getNodeName(store.store_name) }}</td>
</tr>

 getNodeName(nodeId)
            {
                axios.get('api/store/getNodeName/'+nodeId).then(function (response){
                   return response.data[0].name;
                });
            }

Теперь вопрос заключается в том, как получить результат для печати внутри тега td. по-видимому, возврат из ajax не работает, и я попытался перенести все это в массив и снова распечатать, но это тоже не сработало. спасибо

Answer 1

Вы можете сделать из списка товаров oop и получить оттуда идентификатор узла, а затем выполнить вызовы API.

<tr v-for="store in storeData" :key="store.id">

<td>{{store.name}} </td>


</tr>

data(){

return{
  storeData : []


   };

},

created(){
for(var i=0; i<this.storeList.length; i++){
  axios.get('api/store/getNodeName/' + this.storeList[i].store_name)
     .then(response => this.storeData.push({ id: this.storeList[i].store_name, 
     name:  response.data[0].name  
  }))
   }

}

Answer 2

Предполагая, что ваш API работает, первое, что вы делаете неправильно, это то, что вы возвращаетесь из обратного вызова при разрешении Promise, а не из метода getNodeName.

Один простой способ добиться того, что вы делаете хочу, это l oop через storeList (при условии, что это опора) внутри mounted ловушки жизненного цикла (используя функции стрелок здесь)

...

<tr v-for="node in nodes" :key="node.id">
  <td>{{ node.name }}</td>
</tr>

...

data() {
  return {
    nodes: []
  };
},
mounted() {
  this.storeList.forEach(store => this.getNodeName(store.store_name));
},
methods: {
  getNodeName(nodeId) {
    axios.get('api/store/getNodeName/' + nodeId)
      .then(response => this.nodes.push({ id: nodeId, name: response.data[0].name }))
  }
}

...

Вы, вероятно, также хотите превратить это в один вызов API, если это возможно, поскольку вы делаете storeList.length вызовы.