如何更改数据方法中的值

Question

我试图在单击仪表板时显示对话框 link。问题是我无法将对话框值更改为 true，因为它在数据方法中。正确的做法是什么？

  export default {
data: () => ({
  drawer: true,
  dialog: false
}),
props: {
  source: String
},
methods: {
  me: () => {
    alert('me')
  },
  showDialog: () => {
    this.dialog = true
  }
},
computed: {
  months: () => (
    this.months = ['na', 'asd', 'asd']
  )
}

}

这是jsfiddle中的布局https://jsfiddle.net/vfztk8ve/

Answer 1

我注意到您的布局中有以下代码。

<v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat @click.native="dialog = false">Save</v-btn>

我想说您以完美的方式关闭对话框并将组件的 dialog 值设置为 false。

实际上数据方法的执行类似于变量而不是组件中的方法，因为我们不会在所有组件实例之间共享组件中的值。以下是 official document.

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.

如何更改数据方法中的值

How can I change the value inside the data method

vue.js

vuetify.js