Control checkbox state based on Grandparent or parent selection in Vue

Currently, I am attempting to toggle a checkbox based on the status of either the grandparent or parent checkboxes:

new Vue({
  el: '.app',
  data: {
    grand_parent: false,
    parent: false
  }
})

Unfortunately, it is not working as expected. You can see the issue here:

http://jsbin.com/yabewemimo/edit?html,js,output

The desired outcome is:

  • Checking/unchecking the grandparent should also affect the parent and child checkboxes
  • Checking/unchecking the parent should only impact the child checkbox

I appreciate any assistance with this matter.

javascriptvuejs2vue.js

Answer №1

It appears that your code is not functioning as expected due to the presence of a v-model on the parent element, causing the :checked property binding to have no effect.

new Vue({
  el: '.app',
  data: {
    grand_parent: false,
    parent_proxy: false // This prevents stack overflow when referencing this.parent in its own computed
  },
  computed: {
    parent: {
      get () {
        return (this.grand_parent)
          ? true 
          : this.parent_proxy
      },
      set (val) {
        this.parent_proxy = val
      }
    }
  }
})

To see the corrected version in action, you can visit this link.

Answer №2

You might want to tune in and see for yourself:

  watch: {
    main_guardian: function (value) {
      if (value) this.guardian = true;
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

In my code, I am currently working on drawing rectangles on the corners of an image using JavaScript. To achieve this, I first extract the image data from a canvas element. // Get image data let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) ...

javascripthtmlcanvasfilterpixel

Retrieve the entity object and convert it into JSON format using json_encode

I have an array that looks something like this: $general_informations['company'] = $company_db In this array, $company_db is an Entity object with properties, such as: $city = $company_db->getCity(); After using json_encode(), I want to re ...

javascriptphpjsonobjectencode

"Triggering a JavaScript event when pasting text on

How can I capture a paste event on an iPhone using JavaScript and jQuery? I've already tried using jQuery's keyup and paste methods without success. Any suggestions? Here is the code I have attempted: $("#MyInputFields input").eq(0).b ...

javascriptjqueryiospastejquery-events

Refreshing JWT tokens using Vue resource interceptor

I am currently working on creating a custom vue-resource interceptor that handles the refreshing of JWT access tokens upon expiration. My approach involves implementing a post-request callback to detect token expiration errors (status == 401). The idea is ...

vue.jsvue-resource

Display the returned view following an AJAX request

Currently, I am trying to search for a specific date in the database using ajax to trigger the function. However, I am encountering a 404 error when I should be receiving the desired outcome, and the ajax call is entering an error mode. Here is the snippet ...

javascriptjqueryasp.netajax

Clear out the information from the previous table and set up a fresh one using DataTables

I am facing difficulties with datatables. I am using it to showcase data retrieved from a vuejs request, but I am unable to receive the sorted data after making a second request. The initial request fetches the data successfully as shown below: var dates ...

jqueryvue.jsdatatables-1.10vue-resource

Booting up a module in AngularJS without using automatic bootstrapping

Here is the structure of my HTML... <body id="main"> {{pageName}} </body> This is how I implement it in JavaScript: angular.module('myApp',[]) .controller('myController', function($scope){ console.log('initial ...

javascriptangularjs

Error message: Unable to access .exe file through HTML link

We have a need to include an HTML link on our intranet site that, when clicked, will open an .exe file that is already installed on all user machines. I attempted the following code: <a href = "C:\Program Files\Cisco Systems\VPN&bsol ...

javascriptjqueryhtmlexe

The dropdown menu fails to function when placed within a div or generated dynamically

When I try to utilize the "dropdown-menu" outside of a div, it works correctly. However, when it is placed inside a div or added dynamically, it does not work as intended. Here is an example on jsfiddle The code snippet is as follows: <link rel="s ...

javascripthtmljquerydrop-down-menubootstrap-5

What is the best way to integrate a Svelte component into a vanilla JS project without including Svelte as a dependency in the main project?

Is there a way to import a Svelte component into a project that does not have Svelte as a dependency? Imagine creating an npm package with a Svelte component and installing it in different projects without needing to add Svelte as a dependency. The package ...

javascriptnpmes6-modulessvelte-component

Having trouble with `npm run watch` stopping after compiling once on Laravel 8 Homestead with Vue integration?

Every time I use npm run watch, it successfully compiles my changes and updates the pages. However, after making subsequent edits, it stops updating the page without any errors showing up. Restarting npm run watch resolves this issue, indicating that it ma ...

phpnode.jslaravelvue.jsnpm

The command is failing to include functionality with the yarg npm package

I have been attempting to incorporate a command using yargs, however, after executing my code, the command does not seem to be added successfully. Below is the snippet of what I am attempting: const yargs = require('yargs') //create add command ...

javascriptnode.jsnpmyargs

Failed to verify the myCon module on the localhost server due to an Internal Server Error with a status code of 500

Currently, I am verifying if the user-entered code matches the code stored in the database by sending an AJAX request in the view. In another function where I am using similar code, the request is successful and I receive a response. However, when attempti ...

javascriptphpmysqlajaxcodeigniter

Can PHP encode the "undefined" value using json_encode?

How can I encode a variable to have the value of undefined, like in the JavaScript keyword undefined? When I searched online, all I found were results about errors in PHP scripts due to the function json_encode being undefined. Is there a way to represent ...

javascriptphpjsonundefinedmorris.js

Having trouble setting the select value with JavaScript in the Selenium web driver

I am working on a web page that includes a cascaded dropdown feature. The data in the second dropdown appears to be generated via ajax based on the selection made in the first dropdown. Here is the code for the first select option: <select class="form- ...

javajavascriptseleniumselenium-webdriverhtml-select

Basic exam but located in a place that is not valid

Here is a test I am working on: // import {by, element, browser} from "protractor"; describe('intro', () => { beforeEach(() => { browser.get(''); }); it('should have multiple pages', () => { let buttonOn ...

javascriptnode.jsseleniumtypescriptprotractor

Arranging a map by its keys results in a sorted Map object with the initial key located at the end of

I have a function that creates a Map object from two arrays and then attempts to sort the map by key. Despite following the sort method as outlined in Mozilla Docs, the sorting is not working as expected; it places the first key at the last index when usin ...

javascriptarrayssorting

The insecure connection to http://bs-local.com:3000 has prevented access to geolocation

Hi everyone, I hope your day is going well. I could really use some assistance with an issue I've run into. I'm currently trying to test my React web app on BrowserStack's mobile screens, but I am doing the testing locally using localhost. ...

javascriptreactjstypescriptbrowserstack

Tips for triggering a keyboard event to the parent in Vue 3

In my Vue 3 project, I have components nested five levels deep. The top-level component named TopCom and the bottom-level component called MostInnerCom both contain a @keydown event handler. If MostInnerCom is in focus and a key is pressed that it cannot ...

vue.jsvuejs3

Shifting v-slot references into a Vue.js component - tips and tricks!

I'm struggling to understand how to transfer the v-slot data into a component. Suppose I want to restructure the code below: <template v-slot:item="data"> <template v-if="typeof data.item !== 'object'"> <v-list-item-co ...

javascriptvue.jsvuetify.js