在VueJS中更改道具时重新加载组件

Question

我使用以下代码显示传递值＆＃39;类别＆＃39;的组件。类别根据用户交互而变化。但是，一旦加载了一个组件，其数据就不会根据道具的变化而改变。

<button @click="selected='new'">Change</button>
<popup :category="selected"></popup>

data() {
    return {
      selected: 'test'
    }
  }

Answer 1

您必须在category组件的popup上加watcher，如下所示：

watch: {
  category: function(newVal){
    this.selected = newVal   // or this.openPopup(newVal) is this suits
  }
}