Использование v-модели для двусторонней привязки в Vue. js

Question

Я пытаюсь сделать простой конвертер, то есть пользователь вводит сумму, а цена конвертируется. Предположим, у меня есть поле ввода на моем веб-сайте:

<input type="number" v-model="coin_amount" id="usd" placeholder="Amount (USD)">

И convert() функция, которая конвертирует coin_amount в другую валюту

convert() {
  axios({
    method: "GET",
    "url": "https://api.coinmarketcap.com/v1/ticker/" + this.input.cryptocurrency + "/"
  }).then(result => {
    this.coin_amount = this.coin_amount / result.data[0].price_usd;
  }, error => {
    console.error(error);
  });
  return this.coin_amount;
}

И я отображаю преобразованное значение следующим образом:

<span><strong>Value:</strong> {{ coin_amount }}</span>

Как вызвать функцию convert(), чтобы она могла конвертировать сумму при наборе (LIVE). Я думал использовать v-model, но он показывает только введенную сумму, а не конвертированную. Я также подумал использовать специальную кнопку конвертирования и вызвать ее с помощью v-on:click="convert(), но я хочу сделать ее более продвинутой.

Answer 1

Computed

Было бы проще использовать computed вместо convert метода:

computed: {
  converted() {
    // do stuff with `this.coin_amount` 
    // return the converted value
  }
}

Затем в вашем шаблоне показать это вычисляемое свойство:

<span><strong>Value:</strong>{{ converted }}</span>

---

РЕДАКТИРОВАТЬ ДЛЯ ASYN C:

Но теперь вы отредактировали свой вопрос, чтобы показать код преобразования, и он асин c.

Опция 1

Поскольку вычисляемые значения только syn c, чтобы продолжить использовать его asyn c, вам потребуется решение типа vue -asyn c -computed . Вместо этого я бы использовал следующую опцию, но вот как будет выглядеть ваш код при использовании этого пакета с вашим конвертирующим кодом:

asyncComputed: {
  async converted() {
    const result = await axios({ method: "GET", url: "https://api.coinmarketcap.com/v1/ticker/" + this.input.cryptocurrency + "/" });
    return this.coin_amount / result.data[0].price_usd;
  }
}

Опция 2

Или вы могли бы используйте watch, которые могут быть асин c. В этом примере converted - это переменная данных, установленная часами, а не вычисленная:

data() {
  coin_amount: null,
  converted: null,
  // ...   
},
watch: {
  async coin_amount(val) {
    const result = await axios({ method: "GET", url: "https://api.coinmarketcap.com/v1/ticker/" + this.input.cryptocurrency + "/" });
    this.converted = this.coin_amount / result.data[0].price_usd;
  }
}