reactive linked forms in vue.js-CodePudding

greatings

I am making a simple excercise in vue.js

I want to link the values of three forms in vue.js

i have the first one, then the second one will change when the first changes, and after that the third

and also when I reach the value cero I want this values like the beggining, but is not happening

this is the code:


<template>
    <div>
        <h1>Aqui vamos a estudiar tres forms</h1>
        <form>
            <div >
                <label for="name">value1</label>
                <input type="number"  id="value1" placeholder="value1" v-model="value1" />
            </div>
        </form>
        <form>
            <div >
                <label for="name">when value1 changes value2 is equal 3. when value1 is cero should be cero</label>
                <input type="number"  id="value2" placeholder="value2" v-model="value2" />
            </div>
        </form>
        <form v-if="value2 === 3">
            <div >
                <label for="name">if value2 ===3 i exist </label>
                <input type="text"  id="value3" placeholder="value3" v-model="value3" />
            </div>
        </form>
        <br />
        <br />
        <br /><br />
    </div>

</template>

<script>
export default {
    name: 'form-example',
    data() {
        return {
            value1: 0,
            value2: 0,
            value3:''
        }
    },
    watch: {
        
        value1() {
            if (this.value1 !== 0) {
                return this.value2 = 3
            }
            if (this.value1 === 0) {
                return this.value2 = 0
            }
            
                     
        },
        
        value2() {
            if (this.value2 !== 0 ) {                
                return this.value3 = `value 2 has value equal ${this.value2}`
            }
            if (this.value2 === 0) {                
                return this.value3 = ''
            }
        },
    }
    

}
</script>

<style scoped>
.aligned-left {
  text-align: left;
}
</style>

the first time it works ok, but when it gets the values of the conditions is not working properly. It is like is not being reactive, just works the first time the values changes?

CodePudding user response：

your input values data types are string, and 0 is a number.

 // let's say value1 = '0'
this.value1 !== 0 // always true,'0' is not equal value to 0
                  // since '0', is not an empty value

// Do it like this
this.value1 != 0
this.value1 == 0