Vue.js 结果未定义

Question

根据我目前的代码，我收到一个错误，即“结果”未定义，但如果我在数据区域中定义它，我会收到一个错误，即您无法复制键。

<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: function () {
        return result = this.weightLifted * (1 + (this.reps / 30));
      }
    }
  }

</script>

Answer 1

这会给你一个错误： <input type="text" id="result" v-model="result">

v-model 不能在计算时设置，除非你有一个 getter 和一个 setter。

我不确定如果用户编辑该字段，您希望发生什么，但您应该将其定义为一个值，而不是让它可编辑，或者为应该发生的事情定义规则

这是一个使用 setter 从 Max 更新中计算 weightLifted 的示例

new Vue({
  el: "#app",
  data() {
    return {
      weightLifted: '',
      reps: '',
    }
  },
  computed: {
    result: {
      get() {
        return this.weightLifted * (1 + (this.reps / 30));
      },
      set(newVal) {
        this.weightLifted = newVal / (1 + (this.reps / 30))
      }
    }
  }
})

小提琴链接https://jsfiddle.net/m27pankg/1/