<p>我正在尝试将数据从我的父组件 <code>formTelemarketing</code> 发送到我的子组件 <code>nAsignedCalls</code> 来执行此操作,我正在父 <code>props 中执行一个 prop : { register: Number },</code> 当我单击提交按钮(不是提交按钮)时应该填充一个表格,我的操作按钮调用函数 <code>searchRegisters</code> 并从表单中获取值并使用 $emit 将 prop 发送到我的组件</p>
<pre class="brush:php;toolbar:false;">this.$emit("registers", getCall(toRef(param_search,'param_search')))</pre>
<p>在我的父组件中包含的子组件中,我有:</p>
<pre class="brush:php;toolbar:false;"><div id="app5">
<nAsignedCalls @registers="getCall"></nAsignedCalls>
</div></pre>
<p>在我的导出默认子组件中,我有 props:['register'],在我的表中这个组件中,我有一个 for-each 应该从这个道具中获取所有数据...我没有控制台中出现任何错误,但我无法显示我的数据</p>
<pre class="brush:php;toolbar:false;">{{ (register) ? register : "vacio" }}
<template v-for="item of register">
<tr>
<td>{{ item.id }}</td>
<td>{{ (item.name) ? item.name : '' }} </td></pre>
<p>例如,这是我的结构,我有一个条件来知道注册是否已填充,始终返回“vacio”。</p>
<p>这是我在子组件中的 props 定义:</p>
<pre class="brush:php;toolbar:false;">export default defineComponent({
name: 'nAsignedCalls',
props:['register'],</pre>
<p>我的 API 没问题,在控制台网络选项卡中我可以显示响应 ok <code>{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",</code> i有更多数据...</p>
<p>我不知道我做错了,我是 vue 的新手......</p>
<p>感谢您的自述,并为我的英语不好而抱歉</p>
<p><strong>更新</strong></p>
<p>首先,我在我的项目中使用组合 API。</p>
<p>现在,在我的子组件中我定义了我的事件</p>
<pre class="brush:php;toolbar:false;">// personaliced event
const emitMyEvent = (event) => emit('registers', event);
return {
remove,
searchId,
searchName,
searchPhone,
edit,
getResults,
getPage,
emitMyEvent,
getCall
}</pre>
<p>在我的 app.js 中,我重新定义了 app5:</p>
<pre class="brush:php;toolbar:false;">const app5 = createApp({
components:{
nAsignedCalls
},
setup() {
const getCall = (event) => console.log('getCall(): ' + event.target.id);
return { getCall }
}
})
app5.mount('#app5')</pre>
<p>但是当我单击按钮时,我无法在网络或控制台中显示任何内容</p>
<p><strong>我的按钮:</strong></p>
<pre class="brush:php;toolbar:false;"><input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters()"></pre>
<p>我的父组件中的所有内容脚本,我正在单击按钮并调用函数。</p>
<p>使用父组件中的所有代码更新我的问题:</p>
<pre class="brush:php;toolbar:false;"><template>
<div class="container mt-3 bg-white shadow rounded p-3">
<div class="row justify-content-start mt-4">
<div class="col-md-6 ml-3">
<div class="form-group">
<div class="row justify-content-center">
<select class="form-control" name="teleoperator" id="teleoperator_select" placeholder="Teleoperadora">
<option hidden>Teleoperadora</option>
</select>
</div>
</div>
</div>
</div>
<div class="row justify-content-start align-items-center mt-4">
<div class="col-md-4">
<div class="form-item">
<input type="text" name="address" id="address" required>
<label for="address">Dirección</label>
</div>
</div>
<div class="col-md-4">
<div class="form-item">
<input type="text" name="city" id="city" required>
<label for="city">Ciudad</label>
</div>
</div>
<div class="col-md-4">
<div class="form-item">
<input type="text" name="cp" id="postal_code" required>
<label for="postal_code">Código Postal</label>
</div>
</div>
</div>
<div class="row justify-content-center">
<input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters">
</div>
</div>
<div class="container mt-3 bg-white shadow rounded p-3 ">
<div class="row justify-content-center">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#nasigned">No asignadas</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#asigned">Asignadas</a>
</li>
</ul>
</div>
<div class="container" style="width: 95% !important;">
<div class="tab-content">
<div class="tab-pane fade-in" id="asigned">
<div id="app4">
<asignedCalls></asignedCalls>
</div>
</div>
<div class="tab-pane fade-in active" id="nasigned">
<div id="app5">
<nAsignedCalls @registers="getCall"></nAsignedCalls>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { onMounted, defineComponent, toRef } from 'vue';
import useNregister from '../composables/ncalls'
import asignedCalls from './roomBooss/asignedCalls';
import nAsignedCalls from './roomBooss/nasignedCalls';
export default defineComponent({
components: {asignedCalls, nAsignedCalls},
data(){
return{
items: [],
pagination: {
current_page: 1,
},
register: 0,
}
},
props: { register: Number },
setup(props, { emit }, context) {
const emitMyEvent = (event) => emit('registers', event);
var param_search = {};
const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()
function remove(id) {
deleteCalls(id)
}
function searchId(action) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function searchName(action) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function searchPhone(action) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function edit(action) {
window.location.href = '/roomboss/telemarketing/call/'+action+"/edit";
}
function show(action) {
window.location.href = '/roomboss/telemarketing/call/'+action;
}
function getPage(page){
getItems(page);
}
function searchRegisters(){
var address = "";
var city = "";
var cp = "";
address = document.getElementById("address").value
if( address != "" ) {
param_search["parameter"] = "address";
param_search["value"] = address;
}
city = document.getElementById("city").value
if( city != "" ) {
param_search["parameter"] = "city";
param_search["value"] = city;
}
cp = document.getElementById("postal_code").value
if( cp != "" ) {
param_search["parameter"] = "cp";
param_search["value"] = cp
}
context.emit("registers", getCall(toRef(param_search,'param_search')))
}
return {
remove,
searchId,
searchName,
searchPhone,
edit,
show,
getResults,
getPage,
getCall,
searchRegisters,
emitMyEvent
}
}
})
</script></pre>
<p><strong>更新</strong></p>
<p>我发送的数据可以在网络选项卡中显示,但我的表格是空的</p>
<pre class="brush:php;toolbar:false;"><tbody>
<template v-for="item of registers">
<tr>
<td>{{ item.id }}</td>
<td>{{ (item.name) ? item.name : '' }} </td>
<td>{{ (item.address) ? item.address : ''}}</td>
<td>{{ (item.province) ? item.province : ''}} </td>
<td>{{ (item.city) ? item.city : ''}} </td>
<td>{{ (item.cp) ? item.cp : ''}} </td>
<td>{{ (item.phone) ? item.phone : ''}} </td>
<td>
<span class="text-light" :class="item.status.class_span">
{{ (item) ? item.status.name : 'null' }}
</span>
</td>
<td>
<div class="hover-text">
<div class="icon-actions">
<div class="row justify-content-center">
<div class="col-md-6 offset-md-1">
<i class="fas fa-cog"></i>
</div>
</div>
</div>
<div class="container-actions">
<div class="col-md-3">
<button class="tooltip-text btn" id="edit" @click="edit(item.id)"><i class="fas fa-2x fa-edit"></i></button>
</div>
</div>
</div>
</td>
</tr>
</template>
</tbody></pre>
<p>我在组件<code>nAsignedCalls</code>中的脚本,我尝试在for和<code>emitMyEvent</code>和<code>newRegisters</code>中使用<code>registers</code></p> >
<pre class="brush:php;toolbar:false;"><script>
import useNregister from '../../composables/ncalls'
import { onMounted, defineComponent } from 'vue'
export default defineComponent({
name: 'nAsignedCalls',
emits: ['registers'],
data(){
return{
items: [],
pagination: {
current_page: 1,
},
newRegisters: Object.assign({}, this.registers),
}
},
setup(props, { emit }) {
const { getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNregister()
function remove(id) {
deleteDates(id)
}
function searchId(action) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function searchName(action) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function searchPhone(action) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function edit(action) {
window.location.href = '/roomboss/calls/'+action+"/edit";
}
function getPage(page){
getItems(page);
}
// personaliced event
const emitMyEvent = (event) => emit('registers', event);
return {
remove,
searchId,
searchName,
searchPhone,
edit,
getResults,
getPage,
emitMyEvent,
getCall
}
}
});
</script></pre></p>
更新2
在
setup()
函数中,您必须使用Composition API
使用
Composition API
,您可以通过setup()中获得emit
函数。 org/api/composition-api-setup.html#setup-context" rel="nofollow noreferrer">设置上下文。检查我的第一个示例:
您将获得
emit
函数然后直接使用
在您的情况下,您传递了设置上下文,因此您可以通过
context
调用emit
看来您确实不需要定义自定义事件,但我仍然推荐它:
请注意,
this.$emit()
调用由Options API
使用,而不是Composition API
更新
与使用
this.$emit
的Options API
相同