Question

有一个非常相似的问题与一个上午问，但提出的解决方案不是我的情况。我正在尝试使用vue中的Modal组件从其他组件中的父列表访问数据。我尝试在循环中传递prop值以及在父视图中传递使用的组件，但是没有接收到数据。

这是父模板。

    <template>
    <table class="table table-bordered table-stripped" v-if="users.length>0">
        <caption>List of Contacts</caption>
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(user, index) in users" :key="user.id">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>
                    <button type="button" class="btn btn-success btn-sm" @click="initEdit(user)" :euser="user">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
    <edit-user v-if="showEditUser" :showEditUser.sync="showEdit"></edit-user>
</template>

<script>
import editUser from '@/components/editUser.vue';
export default {
  name: 'listusers',
  components: {
        'edit-user': editUser,
    },
    data() {
      return {
          user: [],
          users: [],
          euser: {},
          showEdit: false,
        };
  },
    methods: {
        initEdit() {
            this.showEditUser = true;
        },
    },
};
</script>

这是模式部分。

    <template>
        <transition name="modal" role="dialog">
            <div class="modal" style="display: block">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Contact</h5>
                    </div>
                    <div class="modal-body">
                        <p>{{euser}}</p>
                        <p>{{euser.id}}</p>
                    </div>
                    <div class="modal-footer">
                            <button type="button" class="btn btn-default" @click="closeModal">Close</button>
                    </div>
                    </div>
                </div>
            </div>
        </transition>
    </template>
<script>

export default {
    name: 'editUser',
    props: {
      euser: {
        type: Object,
      },
      showEdit: {
          'default' : false,
      }
    },
    data() {
        return {
            edit_user: [],
        };
    },
  methods: {
        closeModal(){
            this.$emit('update:showEdit');
        },
  },
};
</script>

我试图在上面所示的循环以及下面所示的组件中传递prop值。

<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="user"></edit-user>

如何从父级中获得一个用户显示在模式中？

Answer 1

您可以在父组件中创建一个名为“ currUser：null”的数据属性，并在“ initUser”方法上可以执行以下操作：

initEdit(user){
    this.currUser=user;
    this.showEditUser = true;
}

然后，模态组件定义将如下所示：

<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="currUser"> 
</edit-user>

Answer 2

像这样通过用户：

<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="user[indexOfUser]"></edit-user>

并更改prop属性以接收对象而不是数组

  euser: {
    type: Object,
  },

仅尝试将主要组件数据添加到用户中，仅用于测试“未定义”问题是否来自那里。并在:euser="user[0]"

中

user: [{
   id: 1
}]

Answer 3

首先，必须将<FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="460dp" app:layout_constraintTop_toBottomOf="@id/myTitle"> <android.support.v4.view.ViewPager android:id="@+id/myViewPager" android:layout_width="match_parent" android:layout_height="460dp" android:clipToPadding="false" android:overScrollMode="never" android:paddingStart="20dp" android:paddingTop="16dp" android:paddingEnd="19dp" /> </FrameLayout>属性传递给for i,subArray in enumerate(s): for j,element in enumerate(subArray): try: float(element) # This will fail if the element cannot be converted except: s[i][j] = 0组件，而不是将调用该编辑的按钮。

第二，euser函数应看起来像这样

<edit-user/>

第三，如果您打算在模式中编辑用户，则可能需要在子组件中创建该用户的副本。

initEdit()

然后子级上的所有initEdit(user) { this.user = user this.showEditUser = true }都应指向watch: { showEditUser() { this.editableUser = JSON.parse(JSON.stringify(this.euser)) } }。当用户去保存编辑内容时，您可以发出一个新功能，可以像这样将新版本传递回父版本

v-models

您只需要像这样保存this.editableUser组件中的保存内容

saveEdit() {
   this.$emit('save', this.editableUser)
}

Vuejs使用道具访问模态组件中的数据

3 个答案: