Vue.js slots do not automatically update when dynamic data is passed down from the parent component

Question

Vue.js slots do not automatically update when dynamic data is passed down from the parent component

Initially, I successfully pass a variable from the parent component to the slot of a child component where it is correctly displayed. However, when this variable changes in the parent, the change is not reflected in the child component. Below is my code snippet:

<template>
  <div>
    <v-client-table
     :columns="columns"
     v-model="data"
     :options="options"
     :class="{ 'ready' : isReady }"
    >
    <div slot="h__select">
      <input type="checkbox" @change="selectAll($event)" 
      :checked="allSelected" />
    </div>
 ....

The variable in question is "allSelected". How can I bind the "checked" attribute to the value of the "allSelected" variable? I have researched extensively but haven't found a solution. Any assistance would be greatly appreciated.

javascript vue.js vuejs2

Answer 1

Answer №1

Implement the following method:

<template>
<!-- A high-level V-CLIENT-TABLE component -->
  <table>
    <thead>
      <tr>
        <th>
          <slot name="h__select" :allSelected="all" />
        </th>
        <!-- Display the header contents here -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in items" :key="index">
        <slot :item="item" />
      </tr>
    </tbody>
  </table>
</template>

<script>
export default
{
  name: 'VClientTable',
  props:
  {
    items:
    {
      type: Array,
      default: () => []
    },
    columns:
    {
      type: Array,
      default: () => []
    },
  },
  data()
  {
    return {
      all: false,
    };
  },
  watch:
  {
    all(newValue, oldValue)
    {
      // Update checkboxes for all rows
    }
  }
}
</script>

<template>
<!-- Implementation of using V-CLIENT-TABLE -->
  <div>
    <v-client-table
     :columns="columns"
     v-model="data"
     :options="options"
     :class="{ 'ready' : isReady }"
    >
    <div slot="h__select" slot-scope="data">
      <input type="checkbox" @change="data.allSelected = !data.allSelected" 
      :checked="data.allSelected" />
    </div>
  </div>
</template>

<script>
export default
{
  name: 'ChildComponent',
}
</script>

Answer 2

Implement the following method:

<template>
<!-- A high-level V-CLIENT-TABLE component -->
  <table>
    <thead>
      <tr>
        <th>
          <slot name="h__select" :allSelected="all" />
        </th>
        <!-- Display the header contents here -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in items" :key="index">
        <slot :item="item" />
      </tr>
    </tbody>
  </table>
</template>

<script>
export default
{
  name: 'VClientTable',
  props:
  {
    items:
    {
      type: Array,
      default: () => []
    },
    columns:
    {
      type: Array,
      default: () => []
    },
  },
  data()
  {
    return {
      all: false,
    };
  },
  watch:
  {
    all(newValue, oldValue)
    {
      // Update checkboxes for all rows
    }
  }
}
</script>

<template>
<!-- Implementation of using V-CLIENT-TABLE -->
  <div>
    <v-client-table
     :columns="columns"
     v-model="data"
     :options="options"
     :class="{ 'ready' : isReady }"
    >
    <div slot="h__select" slot-scope="data">
      <input type="checkbox" @change="data.allSelected = !data.allSelected" 
      :checked="data.allSelected" />
    </div>
  </div>
</template>

<script>
export default
{
  name: 'ChildComponent',
}
</script>

Vue.js slots do not automatically update when dynamic data is passed down from the parent component

Answer №1

Similar questions

Tips on triggering another action before a loop completes, involving AJAX

Encountering the error 'Cannot read property 'length' of undefined' while attempting to fetch data from a URL using node.js

Tips for creating a gradual fade-out effect on a bootstrap modal window

Activate the Bootstrap Jquery/Ajax inline editing feature by simply clicking on the Edit button

`The Issue with Ineffective Slider Removal`

Looping through Vue custom events

Is there a way to make a selected option stay selected in vue.js 2?

Having trouble accessing a JSON object with Typescript in an Angular 2 project

Adding text in a key value pair object can be easily achieved by specifying the key

Show values in currency format with two decimal places

Update the SQL database by transferring star ratings from a JSP file

Why is it not possible to incorporate a variable in HTML when using Vue.js?

Is there a way for me to retrieve SCSS color variables within the javascript of a Vue template?

Steps for inserting a script tag in an Angular component

What causes a delay in the start of a child process in Node.js?

Iterate through a generic array to populate a table using ng-repeat

Retrieve the currently displayed page on a bootstrap table

What is the best way to calculate the difference in days between two dates using Javascript?

What is the best way to send an Angularjs variable to an id within an HTML input?

Assigning event to the body element