What steps can be taken to receive an alternative result when selecting a checkbox?

Question

What steps can be taken to receive an alternative result when selecting a checkbox?

Currently, I am tackling the issue with checkboxes in Vuetify. The challenge lies in achieving a different output for the second {{ selected.join() }}. For example, when I select the checkbox labeled "Social Media," I receive the text "On our social media" at the first {{ selected.join() }}, but I desire a distinct string (such as "on our social media page") for the second occurrence.

<v-checkbox
      v-model="selected"
      label="Social Media"
      value="On our social media"
    ></v-checkbox>
    <v-checkbox
      v-model="selected"
      label="Website"
      value="on our website"
    ></v-checkbox>

Output: {{ selected.join() }} ...... {{ selected.join() }}

javascript arrays vue.js checkbox vuetify.js

Answer 1

Answer №1

the v-model for both checkboxes is connected to the same attribute selected. This means that if you click on one checkbox, both will be updated.

Instead of binding a checkbox to an array, it would make more sense to bind them to two different boolean values. Then, you can create a computed property that returns your desired result based on the values of these booleans:

<template>
  <div>
    <v-checkbox v-model="checkbox1" label="Social Media"></v-checkbox>
    <v-checkbox v-model="checkbox2" label="Website"></v-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false,
    };
  },
  computed: {
    myWantedResult() {
      const tempArray = [];
      this.checkbox1 && tempArray.push('On our social media');
      this.checkbox2 && tempArray.push('On our website');
      return tempArray.join();
    },
  },
};
</script>

Answer 2

the v-model for both checkboxes is connected to the same attribute selected. This means that if you click on one checkbox, both will be updated.

Instead of binding a checkbox to an array, it would make more sense to bind them to two different boolean values. Then, you can create a computed property that returns your desired result based on the values of these booleans:

<template>
  <div>
    <v-checkbox v-model="checkbox1" label="Social Media"></v-checkbox>
    <v-checkbox v-model="checkbox2" label="Website"></v-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false,
    };
  },
  computed: {
    myWantedResult() {
      const tempArray = [];
      this.checkbox1 && tempArray.push('On our social media');
      this.checkbox2 && tempArray.push('On our website');
      return tempArray.join();
    },
  },
};
</script>

What steps can be taken to receive an alternative result when selecting a checkbox?

Answer №1

Similar questions

Retrieve the object from the PHP array of objects by searching for the one with the ID equal to 2

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Understanding information in Backbone.js

What should be transmitted to the front-end following the successful validation of a token on the server?

Exploring the Power of NPM Modules in an Electron Renderer

Removing multiple items from a list in Vue JS using splice function

Create dynamic elements in Vue.js components based on an object

PHP/MySQL clarification regarding time slots

Troubleshooting Problem with Angular JS Page Loading on Internet Explorer 9

Transmitting information securely and remotely between two online platforms

D3 - Error: Unable to access property 'text' of an undefined method

Comparing the syntax of JSON to the switch statement in JavaScript

Exploring Angular2's interaction with HTML5 local storage

I am looking for a way to hide email addresses using Regex in JavaScript

What is the best way to dynamically add and index dimensions of arrays in PHP?

Exporting all components using require: A complete guide

Is converting the inputs into a list not effectively capturing the checkbox values?

JavaScript: abbreviated way to selectively append an element to an array

Activate the textbox without utilizing `.focus()` method

Incorporating Blank Class into HTML Tag with Modernizr