Блог

Главная - Вопросы по программированию - V-dialog не работает, когда v-model является реквизитом

V-dialog не работает, когда v-model является реквизитом

#vue.js #v-model #vue-props

#vue.js #v-модель #vue-props

Вопрос:

Я использую vuetify.js и пытается передать v-model в реквизитах в тег v-dialog,

v-dialog не работает. когда я нажимаю на кнопку, которая устанавливает реквизит в true,

v-dialog не открывается

здесь прилагается код родительского и дочернего компонентов:

вот мой код :

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

 data: () => ({
    showActionDialog:false,
    )},  
 <team-actions 
           @movetohistorytab="$emit('historytab')" 
           :team="team" 
           :showActionDialog="showActionDialog"
           :selectedSetups="selectedSetups">
           </team-actions>
                       <v-tooltip top>
            <template v-slot:activator="{ on }">
              <v-chip
                :disabled="selectedSetups.length <= 0"
                v-on="on"
                class="ma-2 white--text float-right"
                label
                outlined
                style="font-family: 'Segoe UI Emoji';"
                color="green"
                @click="showActionDialog=true"
                >Add Actions</v-chip
              >
            
            </template>
            Add actions to the selected platforms
          </v-tooltip>

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

 props: {
    team: {
      type: String,
      default: "Sustaining",
    },
    selectedSetups:[],
    showActionDialog:false,
  },  
 <v-dialog v-model="showActionDialog">
        <v-card
          width="900px"
          style="
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
          "
        >
          <v-row>
            <v-col cols="5">
            <v-card-title primary-title style="color: #0d47a1">
              <v-icon color="blue darken-4">arrow_forward</v-icon>Platform
              Actions
              </v-card-title>
              </v-col>      
          </v-row>
          <v-col>
            <v-card style="height: 500px" :tile="true">
                
            </v-card>
          </v-col>
        </v-card>
      </v-dialog>

есть идеи, что здесь не так?

есть что-то особенное в реквизите v-dialog?

кто-нибудь может помочь?

Спасибо!

Комментарии:

1. Я вижу, что у вас есть showActionDialog как у родительского, так и у дочернего элемента. Вы используете его в дочернем элементе, но обновляете его в родительском (это не одна и та же переменная!)

2. Вы можете попробовать: в родительском, добавьте rel="actions_dialog" атрибуты дочернего компонента. И родительский @click="showActionDialog=true" элемент должен стать чем-то вроде @click="$refs['actions_dialog'].showActionDialog=true" . Это эффективно устанавливает дочернее showActionDialog значение tue, поэтому оно должно отображаться.

3. спасибо, v-model и реквизит в дочернем компоненте должны быть: actions_dialog ?

4. Нет, в этом нет необходимости. actions_dialog только для родительского, а не дочернего элемента. Но он создает интерфейс между вашим родительским и дочерним компонентом, поэтому вы можете получить доступ к showActionDialog дочернего компонента ` См. vuejs.org/v2/guide /…

5. не работает:(, сделал следующим образом: в родительский ввел вызов переменной: actions_dialog, в дочерний атрибут ввел: rel=»actions_dialog», в функции click я ввел: @click=»$refs[‘actions_dialog’].showActionDialog=true». в дочернем элементе у меня есть реквизит, называемый ShowActionDialog», это то, что вы имеете в виду?