无法通过vue.js中的其他值更改选项状态数据值

Question

我正在尝试将结果值在其他值之间进行true/false之间。我希望设置结果为true，如果所有其他值都不为空。

我认为它看起来不错，但是结果属性一直返回真实。因此，我无法隐藏结果＆lt; p＆gt;标签。

<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>

Answer 1

在这种情况下，您应该将结果作为计算属性：

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

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