Computed setters

Sometimes, we have a computed property that really represents a clear object in our model, and it feels cleaner to simply edit it directly than to modify its dependencies.

In the context of a table factory, we would like to specify the number of tables or the number of legs we will build:

<div id="app">   <label>Legs: <input v-model="legCount" type="range"></label><br>   <label>Tops: <input @input="update" :value="tableCount"></label><br>   <output>     We are going to build {{legCount}} legs     and assembly {{tableCount}} tables.   </output> </div>

Our state is only determined by legCount, and the number of tables is determined automatically. Create a new Vue instance:

new Vue({   el: '#app',   data: {     legCount: 0   }   }

To know ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.