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方法，这是我完整的VUE代码，可使用click函数更新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是您的数组变量。

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

1 个答案: