VueJS用户mount（）在新的点击/重置组件状态？

Posted 2021-04-30

我在同一页面上有2个组件：1。项目列表2.灯箱，经典的html灯箱，没有任何额外的vuejs组件

我通过prop我的项目ID到灯箱，它工作，如果我点击项目，我看到正确的值。

我的想法是使用mounted（）来发出请求并在每次调用时获得额外的数据，但我看到这是不可能的，并且mount仅在页面重新加载时运行。

有没有办法重置组件状态并在每次调用时运行？

答案

创建一个将为您发出此请求的函数，即每次单击它发出此请求的项目，并通过props将数据传递给组件。如果要在挂载中使用此函数，只需使用它调用它。不要将其绑在安装的内部，导致您每次都为组件充电，而是通过事件将其连接起来。

例：

<div id="app">
  {{ info }}
    <button @click="getData">Get Data</button>
    <button @click="clear">clear</button>
</div>
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  methods: {
    clear() {
      this.info = null
    },
    getData() {
      axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
           this.info = response
        })
      }
    },
  mounted() {
    this.getData()
  }
})

https://jsfiddle.net/hamiltongabriel/nazvruLj/7/