Изменение значения переменных в дочернем компоненте на основе v-select в родительском компоненте (Vuetify)

Question

Я пытаюсь изменить (true / false) значения в моем дочернем компоненте, выбрав некоторые значения в родительском компоненте.У меня есть v-select в родительском компоненте, и, выбрав значение в этом v-select, он должен изменить значение в child с true на false и наоборот.Так что в основном, если я выберу «rPanel» в родительском компоненте.Вкладка «rPanel» должна отображаться в дочернем компоненте.Я попробовал что-то сам, но мой код не работает.Какой лучший способ сделать это?

Вот мой код:

Это родительский компонент с именем "SubrackEdit":

<template>
<div>
.
.
 <app-tabs class="tabs"
          :rPanel="value.rPanel"
          :threeUExpansion="value.threeUExpansion"
          :threeUCompact="value.threeUCompact"
          :threeU="value.threeU"
          :sixU="value.sixU"
                      ></app-tabs>

<v-select
      v-model="value"
      :items="items"
      chips
      background-color="blue"
      color="blue"
      label="Select Subracks to be Configured:"
      multiple
      outline
    ></v-select>
.
.
</div>
</template>

<script>
.
.
value: ['rPanel', 'threeU', 'sixU', 'threeUCompact', 
'threeUExpansion'],
      items: [
        "rPanel",
        "threeU",
        "sixU",
        "threeUCompact",
        "threeUExpansion"
      ]
    }
.
.
</script>

Это дочерний компонент с именем«Вкладки»:

<template>
<div >
  .
  .
    <v-tabs centered
            grow
            icons-and-text
            v-model="active"
            color="blue darken-3"
            dark
            slider-color="white"
    >
      <v-tab v-if="sixU" href="#tab-1">
        6U Subrack
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="threeU" href="#tab-2">
        3U Interface
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="threeUCompact" href="#tab-3">
        3U Compact
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="threeUExpansion" href="#tab-4">
        3U Expansion
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="rPanel" href="#tab-5">
        Relay Panel
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>
    </v-tabs>
.
.
    </div>
</template>

<script>
export default {
  props:["rPanel", "threeU", "sixU", "threeUCompact", 
"threeUExpansion"], 
</script>

Answer 1

Вы должны использовать props для передачи данных от родителя к потомку и событие $emit для передачи обновленных данных от дочернего к родительскому компоненту:

в родительском компоненте, который у вас есть:

  <child :value="val" @update="updateVal" />

в объекте данных и методах:

   data(){
      return{
            val:false
         }
       },
    methods:{
          updateVal(v){//<--- v is the value that's emitted from child component
               this.val=v;
            }
        }

и в дочернем компоненте:

   this.$emit("update", true);