Есть ли способ вызвать метод с параметрами в данных на VUE 2?

Question

У меня есть метод с параметрами, и я хотел бы получить результат в данных (вместо того, чтобы использовать его в фигурных скобках в HTML).Я не уверен, возможно ли это или что.Это пример того, чего я хочу достичь:

- edit-- Мне не нужно несколько функций, мне нужно использовать только одну и использовать ее с параметрами -

html

<div id="app">
  <input type="number" v-model="data1">
  <input type="number" v-model="data2">

  <p>result: {{result1}}</p>
  <p>result: {{result2}}</p>
</div>

vue

new Vue({
  el: '#app',
  data() {
      return {
        data1: '',
        data2: '',
        result1: this.sum(1, this.data1),
        result2: this.sum(1, this.data2),
      } 
  },
  methods: {
    sum(number1, number2){
      return number1 + number2
    }
  }
})

Answer 1

Да, вы можете.

Ваша проблема в том, что вы имеете в виду this.data внутри данных до инициализации data.

Используйте computed вместо данных или методов.

Вы также можете просто вызывать ваши методы из шаблона, если вам нужно использовать data в качестве параметра.

 <p>result: {{ sum(data1, 1 }}</p>
 <p>result: {{ sum(data2, 1) }}</p>

См. Фрагмент.

new Vue({
  el: '#app',
  data() {
    return {
      data1: '',
      data2: '',
      result1: this.sum(1, 1),
      result2: this.sum(2, 2),
    }
  },
  methods: {
    sum(number1, number2) {
      return number1 + number2
    }
  },
  computed: {
    computed1() {
      return this.data1 * 1
    },
    computed2() {
      return this.data2 * 2
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="number" v-model="data1">
  <input type="number" v-model="data2">

  <h1> Method from Template </h1>
  <p>result: {{ sum(data1, 1) }}</p>
  <p>result: {{ sum(data2, 2) }}</p>

  <h1> Method from Computed </h1>
  <p>c-result: {{computed1}}</p>
  <p>c-result: {{computed2}}</p>

  <h1> Invoked From Data Init </h1>
  <p>result: {{result1}}</p>
  <p>result: {{result2}}</p>

</div>

Answer 2

TL; RD:

1.ВЫ ПОЛНОСТЬЮ МОЖЕТЕ

2.Вы, вероятно, не должны

1.Вот способ заставить это работать.

Вместо того, чтобы отвечать значением, сумма отвечает функцией.Это позволяет изменять значение без какой-либо реактивности на работе.(подробнее об этом позже)

Вместо передачи значения в функцию sum передайте указатель (имя строки, которую можно найти)

new Vue({
el: "#app",
data() {
    return {
        data1: "",
        data2: "",
        result1: this.sum("data1", 1),
        result2: this.sum("data2", 3.2)
    };
},
methods: {
    sum(number1, number2) {
        return function() {
            var n1 = this[number1] || 0;
            return Number.parseFloat(n1) + Number.parseFloat(number2);
        };
    }
},
computed: {
    computed1() {
        return this.data1 * 1;
    },
    computed2() {
        return this.data2 * 2;
    }
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="data1">
  <input type="number" v-model="data2">

  <p>result: {{result1()}}</p>
  <p>result: {{result2()}}</p>
</div>

2.почему вы не должны

Vue бесконечно обрабатывать реактивность, используя computed and watch.всякий раз, когда в вашем шаблоне есть функция (при условии, что она находится за пределами оператора v-if), она вычисляется каждый каждый раз, когда компонент перерисовывается.С простой функцией, такой как пример sum, это может не иметь большого значения, но когда у вас есть более сложные функции, обработка ее с использованием вычисленного значения (или часов) будет только пересчитывать части, которые изменились.

Например, если вы измените data1, result1 и result2 будут пересчитаны.Если вы используете вычисленный, только result1 будет пересчитан.