Javascript Vue.js中Select的异常行为

我有一个基本的Vue小部件，它由两个页面组成。在每个页面中，您可以从下拉列表中选择虚拟选项，相应地更改value1和value2变量

问题是，当我从第一步移动到第二步时，由于某种原因，value2的值意外地变得未定义，即使value1和value2之间没有逻辑连接，也没有步骤变量

理想情况下，在第一步之后的第二步中，它应该自动选择选项1，因为该值等于value2=1

我想知道为什么undefined被分配给value2，以及如何防止给定的行为

以下是我的示例代码，其中包含以下奇怪行为：

这是第一步

{{item.name} 下一个 这是第二步

选择2 选项0 选择1 value1:{{value1}} value2:{{value2}} 变量步骤={ 第一步：1， 第二步：2， }; var app=新的Vue{ el:“应用程序”， 数据：{ 步骤：步骤。步骤一， 值1:'b'， 价值2:1， 阵列1：[ { 名称：“选项a”， 值：“a”， }, { 名称：“选项b”， 值：“b”， }, ] }, 方法：{ 转换步骤{ this.step=steps.step2； } }, 观察：{ value1:functionnewValue{ console.logvalue1:+newValue； }, value2:functionnewValue{ console.logvalue2:+newValue； } }, };

---

我不知道vue.js是如何工作的，但我试着在value属性之前加上一个：它就开始工作了

这是第一步

{{item.name} 下一个 这是第二步

选择2 选项0 选择1 value1:{{value1}} value2:{{value2}} 变量步骤={ 第一步：1， 第二步：2， }; var app=新的Vue{ el:“应用程序”， 数据：{ 步骤：步骤。步骤一， 值1:'b'， 价值2:1， 阵列1：[ { 名称：“选项a”， 值：“a”， }, { 名称：“选项b”， 值：“b”， }, ] }, 方法：{ 转换步骤{ this.step=steps.step2； } }, 观察：{ value1:functionnewValue{ console.logvalue1:+newValue； }, value2:functionnewValue{ console.logvalue2:+newValue； } }, };