Javascript Vuejs使用Props访问模态组件中的数据_Javascript_Html_Node.js_Vue.js_Vuejs2

Javascript Vuejs使用Props访问模态组件中的数据

javascript html node.js vue.js vuejs2

Javascript Vuejs使用Props访问模态组件中的数据,javascript,html,node.js,vue.js,vuejs2,Javascript,Html,Node.js,Vue.js,Vuejs2,有一些问题与我提出的问题非常相似，但提出的解决方案与我的情况不符。我正在尝试使用vue中的模式组件从不同组件中的父列表访问数据。我曾尝试在循环中传递prop值，以及在父视图中传递使用的组件，但没有收到任何数据这是父模板 <template> <table class="table table-bordered table-stripped" v-if="users.length>0"> <caption>List o

有一些问题与我提出的问题非常相似，但提出的解决方案与我的情况不符。我正在尝试使用vue中的模式组件从不同组件中的父列表访问数据。我曾尝试在循环中传递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>


联系人名单
#
名称
行动
{{index+1}}
{{user.name}
编辑
从'@/components/editUser.vue'导入editUser；
导出默认值{
名称：“listusers”，
组成部分：{
“编辑用户”：编辑用户，
},
数据（）{
返回{
用户：[]，
用户：[]，
尤瑟：{}，
showEdit:false，
};
},
方法：{
initEdit（）{
this.showEditUser=true；
},
},
};

这是模态分量

    <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>

watch: {
  showEditUser() {
    this.editableUser = JSON.parse(JSON.stringify(this.euser))
  }
}


编辑联系人
{{euser}}
{{euser.id}
接近
导出默认值{
名称：“编辑用户”，
道具：{
尤瑟：{
类型：对象，
},
showEdit：{
“默认值”：false，
}
},
数据（）{
返回{
编辑用户：[]，
};
},
方法：{
closeModal（）{
此.emit（'update:showEdit'）；
},
},
};

我已经尝试在循环中传递prop值，如上图所示，也在下图所示的组件中

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

如何从父级获取单个用户以显示在模式中

像这样传递给用户：

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

只要试着向用户添加主要组件数据，以便测试“未定义”问题是否来自于此。在

：euser=“user[0]”中
只需像这样传递给用户：
<edit-user v-if="showEditUser" :showEditUser.sync="showEdit" :euser="user[indexOfUser]"></edit-user>

只要试着向用户添加主要组件数据，以便测试“未定义”问题是否来自于此。在：euser=“user[0]”中
在父组件中，可以创建名为“currUser:null”的数据属性，在“initUser”方法中，可以执行以下操作：
initEdit(user){
    this.currUser=user;
    this.showEditUser = true;
}

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

然后，模态组件定义将如下所示：
initEdit(user){
    this.currUser=user;
    this.showEditUser = true;
}

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

在父组件中，您可以创建名为“currUser:null”的数据属性，在“initUser”方法中，您可以执行以下操作：
initEdit(user){
    this.currUser=user;
    this.showEditUser = true;
}

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

然后，模态组件定义将如下所示：
initEdit(user){
    this.currUser=user;
    this.showEditUser = true;
}

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

首先，必须将euser
道具传递给
组件，而不是调用编辑的按钮
其次，initEdit（）
函数应该更像这样
initEdit(user) {
  this.user = user
  this.showEditUser = true
}

第三，如果计划在模式中编辑用户，则可能需要在子组件中创建用户的副本
    <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>

watch: {
  showEditUser() {
    this.editableUser = JSON.parse(JSON.stringify(this.euser))
  }
}

然后子系统上的所有v-models
都应该指向this.editableUser。
当用户保存编辑时，您可以发出一个新函数，该函数可以像这样将新版本传递回父级
saveEdit() {
   this.$emit('save', this.editableUser)
}

<edit-user v-show="showEditUser" :showEditUSer.sync="showEdit" :euser="user" @save="saveUser" />

//script...data...methods
saveUser(user) {
  let ind = this.users.map(u => u.id).indexOf(user.id)
  if(ind != -1) {
    Object.assign(this.users[ind], user) //put user back where it belongs with new data
  }
}

您只需要像这样捕获
组件中的save
saveEdit() {
   this.$emit('save', this.editableUser)
}

<edit-user v-show="showEditUser" :showEditUSer.sync="showEdit" :euser="user" @save="saveUser" />

//script...data...methods
saveUser(user) {
  let ind = this.users.map(u => u.id).indexOf(user.id)
  if(ind != -1) {
    Object.assign(this.users[ind], user) //put user back where it belongs with new data
  }
}


//脚本…数据…方法
保存用户（用户）{
让ind=this.users.map（u=>u.id）.indexOf（user.id）
如果（ind！=-1）{
Object.assign（this.users[ind]，user）//使用新数据将用户放回其所属位置
}
}
首先，必须将euser
道具传递给
组件，而不是调用编辑的按钮
其次，initEdit（）
函数应该更像这样
initEdit(user) {
  this.user = user
  this.showEditUser = true
}

第三，如果计划在模式中编辑用户，则可能需要在子组件中创建用户的副本
    <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>

watch: {
  showEditUser() {
    this.editableUser = JSON.parse(JSON.stringify(this.euser))
  }
}

然后子系统上的所有v-models
都应该指向this.editableUser。
当用户保存编辑时，您可以发出一个新函数，该函数可以像这样将新版本传递回父级
saveEdit() {
   this.$emit('save', this.editableUser)
}

<edit-user v-show="showEditUser" :showEditUSer.sync="showEdit" :euser="user" @save="saveUser" />

//script...data...methods
saveUser(user) {
  let ind = this.users.map(u => u.id).indexOf(user.id)
  if(ind != -1) {
    Object.assign(this.users[ind], user) //put user back where it belongs with new data
  }
}

您只需要像这样捕获
组件中的save
saveEdit() {
   this.$emit('save', this.editableUser)
}

<edit-user v-show="showEditUser" :showEditUSer.sync="showEdit" :euser="user" @save="saveUser" />

//script...data...methods
saveUser(user) {
  let ind = this.users.map(u => u.id).indexOf(user.id)
  if(ind != -1) {
    Object.assign(this.users[ind], user) //put user back where it belongs with new data
  }
}


//脚本…数据…方法
保存用户（用户）{
让ind=this.users.map（u=>u.id）.indexOf（user.id）
如果（ind！=-1）{
Object.assign（this.users[ind]，user）//使用新数据将用户放回其所属位置
}
}
谢谢您的回复。我已更改道具属性。我也尝试过按照您的建议传递用户。用户仍然没有显示。对象是“未定义的”。我刚刚添加了一些代码来测试对象“未定义的”。我进行了修改，但在我的子组件上用户没有显示。谢谢您的回复。我已更改道具属性。我也尝试过按照您的建议传递用户。用户仍然没有显示。对象是“未定义的”。我刚刚添加了一些代码来测试对象“未定义的”。我做了修改，但在我的子组件上用户没有显示。谢谢。这正是我想要的。很有效，谢谢。这正是我想要的。它是有效的。结合这一点，我可以在两个组件之间传递数据。谢谢。结合这一点，我可以在两个组件之间传递数据。非常感谢。