Форматирование числа с использованием вычисляемого свойства с помощью .toLocaleString () не работает - PullRequest
Новая
       30

Форматирование числа с использованием вычисляемого свойства с помощью .toLocaleString () не работает

0 голосов
/ 24 апреля 2020

У меня есть range элемент ввода, связанный с amount свойством данных с использованием v-model. У меня есть другой элемент <p></p>, который отображает отформатированную сумму, возвращаемую из вычисленного свойства, но проблема в том, что число не форматируется.

Что я ожидаю увидеть 
12,000
Что я вижу 
12000

Вот демо 

new Vue({
  el: "#app",
  data: {
		amount: 0
  },
  computed: {
  formattedAmount(){
  	return this.amount.toLocaleString()
  }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <h2>Range Formatter</h2>
 <p>{{formattedAmount}}</p>
 <input type="range" id="range" v-model="amount" min="0" max="1000000">
</div>

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Эта проблема здесь this.amount фактически возвращает строку. Сначала вам нужно будет преобразовать его в число, например: 

formattedAmount() {
   return Number(this.amount).toLocaleString();
}


new Vue({
  el: "#app",
  data: {
    amount: 0
  },
  computed: {
    formattedAmount() {
      return Number(this.amount).toLocaleString()
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Range Formatter</h2>
  <p>{{formattedAmount}}</p>
  <input type="range" id="range" v-model="amount" min="0" max="1000000">
</div>

Или используйте модификатор .number, чтобы изменить пользовательский ввод для автоматической типизации как Number как: 

<input v-model.number="amount" type="range" id="range" min="0" max="1000000">


new Vue({
  el: "#app",
  data: {
    amount: 0
  },
  computed: {
    formattedAmount() {
      return this.amount.toLocaleString()
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Range Formatter</h2>
  <p>{{formattedAmount}}</p>
  <input type="range" id="range" v-model.number="amount" min="0" max="1000000">
</div>
1 голос
/ 24 апреля 2020

В настоящее время вы звоните toLocaleString по строке, а не по номеру, поэтому он не будет применять ожидаемое форматирование. Вам необходимо добавить модификатор number к вашему v-model. 

v-model.number="amount"

По умолчанию все элементы <input> будут выдавать значения, являющиеся строками, даже в тех случаях, когда вы можете ожидать число. Модификатор number указывает Vue преобразовать строку в число перед обновлением связанного свойства. 

new Vue({
  el: "#app",
  data: {
    amount: 0
  },
  computed: {
    formattedAmount() {
      return this.amount.toLocaleString()
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Range Formatter</h2>
  <p>{{formattedAmount}}</p>
  <input type="range" id="range" v-model.number="amount" min="0" max="1000000">
</div>
...