VUE используя axios- данные, полученные с сервера, но не показанные

Question

данные получены с сервера и успешно показаны в первый раз (смонтированы), но при нажатии на ссылку, данные получены, но не отображаются.это мой код:

const url = ajxurl + JSON.stringify({act:'storiesNAV', sub:i, psi:psi});
        // send axios request
        var storiesNAV = new Vue ({
            el: '#stories',
            data: {res:[]},
            methods: {
            greet: function (event) {
                    event.preventDefault();
                    axios.get(url).then(response=>{
                        console.log(response.data);
                        this.data=response.data;
                    });
            }
        },
            mounted () {axios.get(url).then(response=>{
                console.log(response.data);
                this.res=response.data;
            });},

        });

и это HTML:

<div class="items">
            <a :href="'stories/'+i.id+''#" v-for="(i) in res">
              <div class="icon" :style="{'background-image':'url(res/img/stories/'+ i.iid + '/icon.png)'}"></div>
              <p>{{i.title}}</p>
              <div class="bg" :style="{'background-color':'#'+ i.bgcolor }"></div>
            </a>
          </div>

любая помощь ??что я делаю неправильно ??

### Edit

проблема была с передачей переменных в метод VUE, это мой полный код VUE для обновления содержимого HTML сфункция щелчка:

storiesNAV = new Vue ({
            el:'#stories',
            data:{
                res:[],
                loading:true,
                items:false,
            },
            mounted () { this.upDate('1'); },
      methods:{
          upDate: function(i, e='') {
                    this.loading = true;
                    this.items = false;
                    const url = Core.SetURL({act:'storiesNAV',sub:i});
            axios.get(url).then(response => {
                        this.loading = false;
                        this.items = true;
              this.res = response.data;
            });
          },
      }
        });

и это HTML:

<div class="result" v-cloak>
          <div class="items" v-if="items">
            <a :href="'stories/'+ i.id +''#" v-for="i in res">
              <div class="icon" :style="{'background-image':'url(res/img/stories/'+ i.iid +'/icon.png)'}"></div>
              <p>{{i.title}}</p>
              <div class="bg" :style="{'background-color':'#'+ i.bgcolor }"></div>
            </a>
          </div>
        </div>

теперь он отлично работает, надеюсь, это кому-нибудь поможет.

Answer 1

Когда вы смонтировали, у вас есть это:

mounted () {axios.get(url).then(response=>{
                console.log(response.data);
                this.res=response.data;
            });},

В вашем методе у вас есть:

greet: function (event) {
                    event.preventDefault();
                    axios.get(url).then(response=>{
                        console.log(response.data);
                        this.data=response.data;
                    });

Измените this.data на this.res, потому что res это ваш массивпеременная.