VueJS用户mount()在新的点击/重置组件状态?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueJS用户mount()在新的点击/重置组件状态?相关的知识,希望对你有一定的参考价值。

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

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

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

enter image description here

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

答案

创建一个将为您发出此请求的函数,即每次单击它发出此请求的项目,并通过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/

以上是关于VueJS用户mount()在新的点击/重置组件状态?的主要内容,如果未能解决你的问题,请参考以下文章

VueJS - 事件“点击”的无效处理程序:未定义

centos7.6重置root密码

在新窗口中打开一个 VueJS 组件

ie浏览器无法自动保存账号密码

如何模拟 VueJs 组件的“挂载”方法?

是否有正确的方法在 vuejs 中重置组件的初始数据?