我正在嘗試將資料從我的父元件formTelemarketing
傳送到我的子元件nAsignedCalls
來執行此動作,我正在父親 props 中執行一個prop : { register: Number },
當我單擊提交按鈕(不是提交按鈕)時應該填充一個表格,我的操作按鈕調用函數searchRegisters
並從表單中取得值並使用$emit 將prop 傳送到我的元件
this.$emit("registers", getCall(toRef(param_search,'param_search')))
在我的父元件中包含的子元件中,我有:
在我的匯出預設子元件中,我有props:['register'],在我的表中這個元件中,我有一個for-each 應該從這個道具中取得所有資料...我沒有控制台中出現任何錯誤,但我無法顯示我的資料
{{ (register) ? register : "vacio" }}{{ item.id }} {{ (item.name) ? item.name : '' }} 例如,這是我的結構,我有一個條件來知道註冊是否已填充,始終返回“vacio”。
這是我在子元件中的 props 定義:
export default defineComponent({ name: 'nAsignedCalls', props:['register'],我的API 沒問題,在控制台網路標籤中我可以顯示回應ok
{"data":[{"id":895,"name":"Aguilera Muriel Fatimas",< ;/code> i有更多數據...
我不知道自己做錯了,我是 vue 的新手......
感謝您的自述,並為我的英語不好而抱歉
更新
首先,我在我的專案中使用組合 API。
現在,在我的子元件中我定義了我的事件
// personaliced event const emitMyEvent = (event) => emit('registers', event); return { remove, searchId, searchName, searchPhone, edit, getResults, getPage, emitMyEvent, getCall }在我的 app.js 中,我重新定義了 app5:
const app5 = createApp({ components:{ nAsignedCalls }, setup() { const getCall = (event) => console.log('getCall(): ' event.target.id); return { getCall } } }) app5.mount('#app5')但當我點擊按鈕時,我無法在網路或控制台中顯示任何內容
我的按鈕:
我的父元件中的所有內容腳本,我正在點擊按鈕並呼叫函數。
使用父元件中的所有程式碼更新我的問題:
<模板><選擇類別=“表單控制項” name="遠端操作員" id="teleoperator_select" ; placeholder="“Teleoperadora”"> <隱藏選項> Teleoperadora選擇> 隱藏選項> 選擇類別=“表單控制項”><輸入類型=“文字”;名稱=“地址” id=“地址”;必填> <標籤=“位址”> 方向 標籤=“位址”><輸入類型=“文字”;名稱=“城市” id=“城市”必填><輸入類型=“文字”;名稱=“cp” id="郵遞區號"必填><輸入類型=“按鈕”類別=“btn btn-dark” value="Buscar registros"; @click=“搜尋寄存器”>;
; 範本> <腳本> 從 'vue' 導入 { onMounted, DefineComponent, toRef }; 從 '../composables/ncalls' 導入 useNregister 從 './roomBooss/asignedCalls' 導入 asignedCalls; 從 './roomBooss/nasignedCalls' 導入 nAsignedCalls; 導出預設定義組件({ 元件:{asignedCalls,nAsignedCalls}, 數據(){ 返回{ 專案: [], 分頁:{ 目前頁:1, }, 註冊:0, } }, 道具:{暫存器:數字}, 設定(道具,{發出},上下文){ const emmitMyEvent = (事件) =>;發出('註冊',事件); var param_search = {}; const { getCall、deleteCalls、queryForKeywords、getResults、getItems } = useNregister() 函數刪除(id){ 刪除通話(id) } 函數 searchId(動作) { 設 id = document.getElementsByClassName('id_search')[0].value const params = [操作, id]; 查詢關鍵字(參數) } 函數搜尋名稱(動作){ 設 id = document.getElementsByClassName('name_search')[0].value const params = [操作, id]; 查詢關鍵字(參數) } 函數搜尋電話(動作){ 設 id = document.getElementsByClassName('phone_search')[0].value const params = [操作, id]; 查詢關鍵字(參數) } 函數編輯(動作){ window.location.href = '/roomboss/telemarketing/call/' 操作“/edit”; } 函數顯示(動作){ window.location.href = '/roomboss/telemarketing/call/' 操作; } 函數 getPage(頁面){ 獲取項目(頁); } 函數搜尋暫存器(){ var 位址 = ""; var 城市 = ""; var cp = ""; 位址 = document.getElementById(“位址”).value if( 位址 != "" ) { param_search[“參數”] = “地址”; param_search[“值”] = 位址; } 城市 = document.getElementById(“城市”).value if( 城市 != "" ) { param_search[“參數”] = “城市”; param_search[“值”] = 城市; }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 } } })更新
我發送的資料可以在網路標籤中顯示,但我的表格是空的
{{ item.id }} {{ (item.name) ? item.name : '' }} {{ (item.address) ? item.address : ''}} {{ (item.province) ? item.province : ''}} {{ (item.city) ? item.city : ''}} {{ (item.cp) ? item.cp : ''}} {{ (item.phone) ? item.phone : ''}} {{ (item) ? item.status.name : 'null' }} <按鈕類別=“工具提示文字btn” id="編輯" @click="“編輯(item.id)”>< i>< button> < div> ;我在元件
> 按鈕類別=“工具提示文字btn”> 腳本>nAsignedCalls
中的腳本,我嘗試在for和emitMyEvent
和newRegisters
/code>和newRegisters
中使用< registers
更新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
相同