使用选项API未定义Vue3数据变量/对象

Question

我使用了Vue2，并重构了我的项目以使用Vue3。

做了所有应该做的事情，但无法与data() {..}交互

以下是data设置：

data() {
return {
rules: {
first: 1,
second: 2,
third: 3,
},
// ... and more variables & objects
}

}

我正在设置变量&data中的对象，有些是常量，而另一些则在方法中被更改。

并且使用data

template:

<input type="file"
@change="changeEvent"
:multiple="this.rules.first > 1"
/>

methods:

changeEvent() {
if(this.rules.first == 1) { //.. do something }
}

与选项API相同，因为它使用Vue2

但在升级到Vue3后，我在console:中得到了这个error

Uncaught (in promise) TypeError: Cannot read property 'rules' of undefined

还有：

[Vue warn]: Unhandled error during execution of setup function
[Vue warn]: Unhandled error during execution of scheduler flush.

同样对于data()中定义的所有variables和objects

我已经在Vue3中阅读了关于Composition API的信息，也许我可以使用它，但现在我正在努力挽救这个项目的生命。

我还读到，我仍然可以使用Options API和Vue3。

那么，为什么相同的Options API代码不起作用呢？

Answer 1

您不应该在模板中使用this

<input type="file"
@change="changeEvent"
:multiple="rules.first > 1"
/>