How to print a Promise object using v-for directive?

Question

Vue.js

Cannot print Promise object. How to fix?

<div v-for="newsItem in newsList" >{{newsItem.title}}</div>

const store = new Vuex.Store({
    state: {
        news: null
      },
    getters: {
      NEWS: state => {
        return state.news;
      },
    },
    mutations: {
        SET_NEWS: (state, payload) => {
            state.news = payload;
        },
    },
    actions: {
        GET_NEWS: async (context, payload) => {
          let data = axios.get('http://news/news_list').then(response => {return response.data});
          context.commit('SET_NEWS', data);
        }
    }
});
const app = new Vue({
    el: '#content',
    store,
    computed: {
      newsList() {
        return this.$store.getters.NEWS;
      },
    },
    mounted() {
        this.$store.dispatch('GET_NEWS');
    }

});

Answer 1

It is necessary to "print out" not the promise itself, but the result of the request. Here it is and pass it to the mutation:

GET_NEWS: context => axios
  .get('http://news/news_list')
  .then(r => context.commit('SET_NEWS', r.data)),