Question

我是Vue的新手，我玩过小vue应用程序，但这是我使用vue和webpack（vue-cli）完成的第一个项目。

我设置了django rest API，然后我使用vue来使用API并显示数据。我遇到的问题是，当我想要做任何事情时，模板都没有更新。数据加载正确，但如果我尝试执行@click事件然后进行v-show（切换显示项目），则不会更改视图。

示例，

假设我有一个从API中使用的pubs列表。

我通过axios获取它们，并将它们存储在名为pubs：

的数组中的数据函数中

<script>
import axios from 'axios'
export default {
  name: 'Pubs',
  data () {
    return {
      pubs: [
        {
          pub_id:'',
          name:'',
          address:'',
          showPub: false,
         },
      ]
    }
  },
  created: function () {
    this.loadPubs();
  },
  methods: {
    loadPubs: function () {
      var vm = this;
      axios.get('http://127.0.0.1:8000/api/pubs/')
      .then(function (response) {
        vm.pubs = response.data;
        vm.pubs.forEach(function (pub) {
        pub.showPub = true;
      });
      console.log("loaded");
    })
   .catch(function (error) {
     this.pubs = 'An error occured.' + error;
    });
   },
   togglePub: function (pub) {
     pub.showPub = !pub.showPub;
     console.log(pub.showPub);
     console.log(pub);
     return pub;
   },
 }
}
</script>

模板可以是：

<template>
  <div class="pubs">
    <h1>VuePubs</h1>
    <ul>
      <li v-for="pub in pubs">
        <section>
          <h2 @click="togglePub(pub)">{{ pub.name }}</h2>
          <section v-show="pub.showPub">
            <h3>{{ pub.address }}</h3>
            <h3>{{ pub.postcode }}</h3>
            <h3>{{ pub.showPub }}</h3>
          </section>
        </section>
      </li>
    </ul>
  </div>
</template>

我可以看到模型中的数据正在发生变化，这要归功于vue-dev工具，但模板并没有改变。该部分无法隐藏，并且h3标签不会使用新的showPub字段进行更新。

非常感谢任何帮助！

数据更改后Vue模板未更新

0 个答案: