VUE 使用 axios- 从服务器接收但未显示的数据

Question

从服务器接收的数据并在第一次成功显示（已安装） 但是当点击一个href时，收到了数据但没有显示。 这是我的代码：

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>

有什么帮助吗？我做错了什么？？

### 编辑

问题在于将变量传递给 VUE 方法，这是我使用点击功能更新 html 内容的完整 VUE 代码：

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 是您的数组变量。