javascript - Vue.js 中 Select 的异常行为

Question

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

问题是当我从“stepOne”移动到“stepTwo”时，由于某种原因，value2 的值意外变为undefined(即使没有逻辑连接) value1 和 value2 之间，也不是 step 变量)。

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

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

这是我的示例代码，其中包含这种奇怪的行为:

<div>
    <div id="app">
        <div v-if="step === steps.stepOne">
            <p>This is step One</p>
            <select v-model="value1">
                <option v-for="item in array1" :value="item.value">{{ item.name }}</option>
            </select>
            <button @click="changeStep()">Next</button>
        </div>
        <div v-if="step === steps.stepTwo">
            <p>This is step Two</p>
            <select v-model="value2">
                <option value="2">option 2</option>
                <option value="0">option 0</option>
                <option value="1">option 1</option>
            </select>
        </div>
        value1: {{value1}}
        <br>
        value2: {{value2}}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var steps = {
        stepOne: 1,
        stepTwo: 2,
    };

    var app = new Vue({
        el: '#app',
        data: {
            step: steps.stepOne,

            value1: 'b',
            value2: 1,

            array1: [
                {
                    name: 'option a',
                    value: 'a',
                },
                {
                    name: 'option b',
                    value: 'b',
                },
            ]
        },
        methods: {
            changeStep() {
                this.step = steps.stepTwo;
            }
        },
        watch: {
            value1: function(newValue) {
                console.log("value1: "  + newValue);
            },
            value2: function(newValue) {
                console.log("value2: "  + newValue);
            }
        },
    });
</script>

Answer 1

我不知道 vue.js 是如何工作的，但我尝试在 value 属性之前放置一个 : 并且它开始工作!

<div>
    <div id="app">
        <div v-if="step === steps.stepOne">
            <p>This is step One</p>
            <select v-model="value1">
                <option v-for="item in array1" :value="item.value">{{ item.name }}</option>
            </select>
            <button @click="changeStep()">Next</button>
        </div>
        <div v-if="step === steps.stepTwo">
            <p>This is step Two</p>
            <select v-model="value2">
                <option :value="2">option 2</option>
                <option :value="0">option 0</option>
                <option :value="1">option 1</option>
            </select>
        </div>
        value1: {{value1}}
        <br>
        value2: {{value2}}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var steps = {
        stepOne: 1,
        stepTwo: 2,
    };

    var app = new Vue({
        el: '#app',
        data: {
            step: steps.stepOne,

            value1: 'b',
            value2: 1,

            array1: [
                {
                    name: 'option a',
                    value: 'a',
                },
                {
                    name: 'option b',
                    value: 'b',
                },
            ]
        },
        methods: {
            changeStep() {
                this.step = steps.stepTwo;
            }
        },
        watch: {
            value1: function(newValue) {
                console.log("value1: "  + newValue);
            },
            value2: function(newValue) {
                console.log("value2: "  + newValue);
            }
        },
    });
</script>