javascript - 将数据从父模式传递到子模式 - Vue.js
问题描述
我试图将一些数据从父组件传递到作为模态的子组件。出于某种原因,向我抛出的错误是“Uncaught TypeError: Cannot set property 'domain' of undefined”。我正在尝试使用其键传递父组件项,然后在父组件中找到此元素,然后在子组件中找到数据变量。有人可以告诉我我错过了什么吗?谢谢!
这是我的父组件 Domain.vue
<template>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" id="filter" placeholder="Filter the Domains">
</div>
<div class="row content-holder">
<table>
<thead>
<tr>
<th class="client-name">Domain</th>
<th class="client-pm">Client</th>
<th class="client-pm">Add Log on Domain</th>
</tr>
</thead>
<tbody>
<tr v-for="domain in domains" :key="domain.id" :domain="domain" class="tr-table">
<td class="client-name">{{ domain.url }}</td>
<td class="client-pm">{{ domain.client }}</td>
<td class="client-pm center"><i class="fas fa-plus jobs-page" data-toggle="modal" @click="openAdd(domain)"></i></td>
</tr>
</tbody>
</table>
</div>
<Add :openmodal="addActive" @closeRequest='close'></Add>
</div>
</template>
<script>
import axios from 'axios';
let Add = require('./Add.vue');
export default {
name:'Domain',
data(){
return {
addActive:'',
domains: [],
domain: {id:'', url:'', client: ''},
errors:{}
}
},
methods:{
getDomains(){
window.axios.get('/develogger-app/public/api/domains').then(({data})=>{
data.forEach(domain =>{
this.domains.push(domain)
});
});
},
openAdd(key){
this.$children[1].domain = this.domains[key];
this.addActive = 'is-active';
},
save(){
},
close(){
this.addActive = '';
},
},
created(){
this.getDomains();
},
components:{
Add
}
}
</script>
这是子组件 Add.vue
<template>
<!-- Modal -->
<div :class="openmodal" class="modal fade" id="exampleModalCenter" tabindex="-1" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Create new Log</h5>
<button type="button" class="close">
<i class="fas fa-times" @click="close"></i>
</button>
</div>
<div class="modal-body">
<form method="post">
<input type="hidden" name="_token" :value="csrf">
<input name="website" type="text" id="website" class="form-control" placeholder="Log Title"><br>
<select id="type" class="form-control" name="type"><br>
<option></option>
</select>
<br>
<select id="type" class="form-control" name="type"><br>
<option value="" disabled selected>Type</option>
<option>Client Update</option>
<option>Dev Update</option>
<option>Bug</option>
<option>Style Fix</option>
</select>
<br>
<label class="left" for="description">Log Description:</label>
<textarea class="form-control" rows="5" id="description" name="description"></textarea>
<br>
<div class="left">
<input type="checkbox" name="tell-everyone" id="tell-everyone">
<label for="description">Tell Everyone?</label>
<br>
<input type="checkbox" name="status" id="status" value="checked">
<label for="checked">Resolved and Tested?</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="log-it" type="button" class="btn btn-circle btn-xl" data-dismiss="modal">
<span id="button-content"><b>LOG IT</b></span>
<span id="button-content"><b>FIX IT</b></span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// checked:false,
name:'Add',
props:['openmodal'],
data(){
return{
domain:'',
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
}
},
methods:{
close(){
this.$emit('closeRequest');
}
},
// computed: {
// isComplete () {
// return this.log.title && this.log.domain_id && this.log.type && this.log.description;
// }
// },
}
</script>
解决方案
data
您在主 Vue 实例中将您指定为一个函数。它应该是
主 Vue 实例中的一个对象:
data: {
....
}
而组件中的一个函数:
data() {
return {...}
}
见官方参考。
您data
对两者都有 as 功能。
推荐阅读
- nlp - 语言解释工具(LIT)zsh:非法硬件指令 python -m lit_nlp.examples.glue_demo
- android - 如何在 react-native 中添加 ios 或 android 平台特定的选择字段
- php - cron 作业脚本可以从浏览器工作,但不能从调度程序工作。?
- ios - 来自情节提要 \"Add\" 的 \"AddCollectionViewController\",但没有获得 UICollectionView。
- javascript - 这个 HTML method = "POST" 标签是如何工作的?
- android - 如何在 Compose UI 中嵌入 Snapkit 登录按钮
- python - 这个python代码随机显示错误,有时它运行,有时它不显示任何错误,但我仍然没有得到任何输出
- c - C中的init()函数调用
- c# - 创建从 linq 到 SQL 查询输出的特定 json 响应?
- docker-container - 错误“ docker:无效的参考格式,使用以下参数生成新容器时