I am trying to change result value between true/false by other values. I want set result to true, if all other values are not empty.

I think it looks like good, but result property returns true all time. So i can not hide result <p> tag.

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <label>
    Name :
    <input type="text" v-model="name" />
  </label>

  <label>
    Size :
    <input type="text" v-model="size" />
  </label>

  <label>
    Quantity :
    <input type="text" v-model="quantity" />
  </label>

  <p v-if="result">Summary: {{ name }} - {{ size }} - {{ quantity }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        name: '',
        size: '',
        quantity: '',
        result: this.name !== '' && this.size !== '' && this.quantity !== '',
      };
    },
  }).mount('#app');
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
    margin-top: 60px;
  }

  label {
    display: block;
    margin: 0 0 10px;
  }

  input {
    display: block;
  }
</style>

CodePudding user response：

In this case you should defing result as a computed property :

  createApp({
    data() {
      return {
        name: '',
        size: '',
        quantity: '',
        
      };
    },
computed:{
  result(){
    return this.name !== '' && this.size !== '' && this.quantity !== ''
  }

}
  }).mount('#app');