Vue.js中无法通过其他值动态修改data选项的result状态值

当前写法存在两个核心问题：

• data()内的赋值逻辑仅在组件首次初始化时执行1次，后续name/size/quantity通过v-model更新时，result不会自动重新计算，值会一直停留在初始化得到的结果。
• 初始化阶段执行result赋值逻辑时，data返回对象中的属性还未完成响应式代理、挂载到组件实例this上，此时this.name/this.size/this.quantity的取值均为undefined，undefined !== ''的判断结果为true，三个条件做与运算后初始化得到的result值就是true，这就是汇总标签始终显示的直接原因。

这类完全由其他响应式数据推导得出的派生状态，推荐使用计算属性computed实现：计算属性会自动追踪所有依赖的响应式数据，只要任意依赖项发生变化，就会自动重新计算返回值，无需手动绑定事件触发更新。
修正后的完整代码如下：

<script src="https://unpkg.com/vue@3.2.37/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: ''
      };
    },
    computed: {
      result() {
        return 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>

扩展提示：如果需要兼容用户输入全空格的场景，可以把判断条件调整为this.name.trim() !== '' && this.size.trim() !== '' && this.quantity.trim() !== ''，避免纯空格输入被误判为有效内容。

内容的提问来源于stack exchange，提问作者wpuzman