Vue.js报错：result未定义，定义后提示键重复的问题求助

咱们一步一步拆解你的问题，找到根源再逐个解决：

问题1："result未定义"报错 #

你在computed的result函数里写了return result = this.weightLifted * (1 + (this.reps / 30));，这里的result是一个完全没声明的变量，JavaScript自然会抛出"未定义"的错误。其实你根本不需要这个赋值操作，直接返回计算结果就行。

问题2："键重复"错误 #

如果在data里定义result，会和computed里的result重名——Vue不允许data和computed拥有同名属性，因为它们最终都会被挂载到Vue实例上，这就导致了属性名冲突，触发"键重复"的报错。

额外注意：v-model绑定computed属性的坑 #

你的模板里给result对应的input用了v-model，但默认的computed只有getter（读取值的逻辑），没有setter（设置值的逻辑），双向绑定会直接失效。如果这个result是用来展示计算结果的只读值，更合适的做法是用:value绑定并禁用input；如果确实需要支持用户修改，就得给computed补上setter逻辑。

方案1：只读计算结果（推荐，符合你的场景） #

因为你的需求是计算最大重量，这个值应该是基于输入的重量和次数自动生成的，不需要用户手动修改，所以用这个方案最合适：

<template>
  <form>
    <label for="weightLifted">Weight Lifted</label>
    <input type="text" id="weightLifted" v-model="weightLifted">
    <br/>
    <label for="reps">Number of Reps</label>
    <input type="text" id="reps" v-model="reps">
    <br/>
    <label for="result">Max</label>
    <!-- 用:value绑定计算值，设置disabled防止用户修改 -->
    <input type="text" id="result" :value="result" disabled>
  </form>
</template>

<style>
</style>

<script>
export default {
  data() {
    return {
      weightLifted: '',
      reps: '',
    }
  },
  computed: {
    result: function () {
      // 先判断输入是否为空，避免NaN出现
      if (!this.weightLifted || !this.reps) return '';
      // 把字符串转成数字再计算，防止字符串拼接错误
      return parseFloat(this.weightLifted) * (1 + (parseFloat(this.reps) / 30));
    }
  }
}
</script>

方案2：支持双向修改的computed（如果需要用户编辑result） #

如果确实需要允许用户修改result并反向更新weightLifted或reps，就得给computed加上setter逻辑，比如固定次数反向计算重量：

<template>
  <form>
    <label for="weightLifted">Weight Lifted</label>
    <input type="text" id="weightLifted" v-model="weightLifted">
    <br/>
    <label for="reps">Number of Reps</label>
    <input type="text" id="reps" v-model="reps">
    <br/>
    <label for="result">Max</label>
    <input type="text" id="result" v-model="result">
  </form>
</template>

<style>
</style>

<script>
export default {
  data() {
    return {
      weightLifted: '',
      reps: '',
    }
  },
  computed: {
    result: {
      get() {
        if (!this.weightLifted || !this.reps) return '';
        return parseFloat(this.weightLifted) * (1 + (parseFloat(this.reps) / 30));
      },
      set(newValue) {
        // 当用户修改result时，反向计算weightLifted（假设reps保持不变）
        if (this.reps) {
          this.weightLifted = newValue / (1 + (parseFloat(this.reps) / 30));
        }
      }
    }
  }
}
</script>

补充说明：因为input是text类型，v-model绑定的是字符串，计算时一定要用parseFloat转成数字，不然会出现字符串拼接的错误（比如输入"100"和"10"，直接相乘会得到"10010"而不是1000）。

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