时间戳

首页 > 解决方案 > 将数据传递给Vue中的模态不起作用

javascript - 将数据传递给Vue中的模态不起作用

问题描述

我正在尝试将数据传递给UserModal. 但是我在这里面临的问题是 user_clicked 字段的值是在openuserdialog方法运行时设置的（在控制台中检查：值已分配）但我无法将其作为参数传递给模态。请帮我解决问题。

<v-data-table :items="users" :disable-initial-sort="true" :mustSort="true" hide-actions>
  <template slot="items" slot-scope="props">
   <td>{{ props.item.file_type.name }}</td>
   <td>{{ props.item.created_at | moment }}</td>
   <td><a @click="openUserDialog(props.item.id, props.item.user_type)" href='javascript:void(0);' class="details-link"><span class="hidden-xs-only">UserTypes</span><span class="hidden-sm-and-up">User Types</span></a></td>
  </template>
</v-data-table>
<v-dialog v-model="userDialog" max-width="1275">
 <UserModal :document="user_clicked" />
  <div class="text-xs-right">
    <v-btn class='vue-file-button text-right' @click="closeUserDialog" >Close</v-btn>
  </div>
</v-dialog>

<script>
  import UserModal from 'views/users/shortlisted_users.vue';
  export default {
    components: {
      UserModal
    },
    data: function() {
      return {
        userDialog: false,
        user_clicked: ''
      }
    }

    methods: {
     openUserDialog(document_id, user_type) {
        this.userDialog = true;
        this.user_clicked = user_type;
        console.log(this.user_clicked);
      },
      closeUserDialog(document_id) {
        this.userDialog = false;
      }
    }
</script>

更新 1

 openUserDialog(document_id, user_type) {
    this.user_clicked = user_type;
    this.userDialog = true;        
    console.log(this.user_clicked);
  }

更新 2

<template>
  <div>
    <v-card id="users-card">
        <Users :users="users"></Users>
    </v-card>
  </div>
</template>

<script>
import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';
import Users from 'views/user/_user_table.vue';

export default {
  components: {
    Icon,
    Users
  },
  props: ['document'],
  data: () => ({
    users: [],
    tab_view: 'tab-users-card'
  }),
  created: function() {
    console.log(this.document);
    this.fetchUsers(this.document);
  },
  methods: {
    fetchUsers(document) {
      this.$axios.get('/my_account/users/document_suggested_users.json', {
        params: {
          document: document.id
        }
      })
      .then(response => {
        this.users = response.data;
      })
    },
  }
};
</script>

标签： javascriptvue.jsvuetify.js

解决方案

问题是您试图在组件document的created处理程序中使用它的生命周期还为时过早。

相反，一种方法是在 UserModal 中使用监视处理程序，如下所示：

watch: {
    document: function () {
        console.log(this.document);
        if (this.document) {
            this.fetchUsers(this.document);
        }
    }
}

推荐阅读