Vue Getter Setter

Posted on  by admin

Vue.js supports getters and setters on computed variables. You can use these variables to provide 2-way data binding. Let’s use this feature to write an app that converts a set of checkboxes (true/false selected values) to binary and vice-versa.

As you check the boxes below, watch the text input at the bottom change. You can also change the text input directly to check/uncheck the boxes. This type of conversion could be used to allow users to “import” and “export” options via their clipboard. You could also use this method to store the binary version in localStorage (and retrieve it later to restore checked options).

I’ll be using Bootstrap 4 for styling so we won’t have to write any CSS. The HTML setup looks like this:.

Inside the <div> let’s build our app template. That’s it for the template! The first block loops through a pets array and creates a checkbox for each one. By setting the v-model to pet.selected, Vue will set the checkbox to be selected if the pet.selected value is true. The second block (line) is a text input bound to the binary variable. This binary variable will actually be a computed property. Normally, computed properties in Vue are read-only.

But we can use a setter (and getter) to support 2-way binding. We’ll build our app in main.js:.

Our pets array is empty. Fill it up with some common pets. Our template is expecting a name and selected property for each one. None of them are selected by default.

To get a binary representation of this list (selected/not selected), we simply loop through the array and add a 1 or 0 for if selected is true or false respectively.

To take a binary string and set our checkboxes, we must loop through the string and set the selected properties accordingly. If 1, then true. Else, then false. The app is done! Check the boxes and watch the binary representation change.

Change the binary and watch the boxes check/uncheck themselves. Binary numbers can be converted to decimal. For example, 101101110 (binary, 9 characters in a JS string) can also be expressed as 366 (decimal, 3 characters in a JS string).

As a form of compression, you could convert the binary to decimal before displaying it to the user. Then, convert it back when they paste it in the text input. In fact, you could convert it to higher bases as well for even more compression. What about base 64? Modified3 years, 3 months ago. How vue use getter setter on v-model? I tried use getter and setter on v-model, but it didn't work.


Learn Vue.js today!

Take an online course and become an Vue.js champion!

11 gold badge44 silver badges1212 bronze badges.

  • 1212 bronze badges. Your getters and setters are fine as is.
  • (They're not strictly necessary in this example, since they're not doing anything to modify the user input, but I assume that's a simplification for the purposes of your question.).
  • There are two separate issues with your code:.
  • the input field is outside the Vue root node, so the framework can't see it.
  • [You corrected this in a late edit to the question.] .