Как я могу отреагировать на конкретный элемент списка группы списков Vue ответом на вызов API?

#vue.js #frontend

#vue.js #интерфейс

Вопрос:

Например, после утверждения запроса в списке я хочу отреагировать на этот конкретный элемент с успехом или неудачей утверждения. Пожалуйста, смотрите Изображение ниже, где я хочу сделать кнопку зеленой при успешном утверждении после успешного вызова API с сервером

Проверьте это изображение

Ответ №1:

Трудно помочь, если вы не поделились каким-либо кодом, но вы можете проверить этот пример:

 <template>

<!-- Your list -->
<ul>
   <li v-for="item in items">
       {{ item }}
       <button @click="approve(item)" :class="{'success': item.approved}">Approve</button>
       <button @click="cancel()">Cancel</button>
   </li>
</ul>
</template>
<script>

<!-- In your script -->
methods: {
  approve(item) {
     // Example using axios for api call
     axios.post('/api/do-something').then(response => {
        
        // Yaaay! success
        item.approved = true;

        // Now check this property to inject the success button class.
     }
  }
}

</script>