I have a straightforward scenario where I need a range input to update a button's text whenever the range value changes. My approach involves using Vue.js to bind data from an object that stores the range value and displays it on the button (and a counter for easier debugging).
In the provided example, when the range value is above 0, the text will show "Buy", otherwise it will display "Sell".
Play around with it here: http://jsfiddle.net/svwa79pe/1/
https://i.sstatic.net/F6FaQ.png https://i.sstatic.net/cWfuu.png
My goal now is to introduce a third button state based on whether the range value is positive, negative, or zero. While I can use Vue's ternary expression within handlebars / mustache syntax, I'm struggling to cover the third state. I'm looking for something akin to a switch statement in Vue, but haven't found anything like that in the documentation.
- Is there a specific tool or method in Vue designed for this kind of logic that I might be overlooking?
- Would it be more practical to create a custom method triggered by the range change event to achieve this functionality?
- Could I be misusing the Vue template altogether? Are there alternative approaches using attributes or other techniques?
HTML
<div id="app">
<span>
<button disabled="true">{{ item.delta }}</button>
</span>
<input type="range" v-model="item.delta" value="0" v-bind:max="item.stock" v-bind:min="0 - item.loot">
<span class="exchange">
<button>
{{ (item.delta > 0) ? "Buy" : "Sell" }}
</button>
</span>
</div>
JS
var stats = {
item : {
price : 10,
stock : 20,
loot : 5,
delta : 0
}
}
var app = new Vue({
el: '#app',
data: stats
});