在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue中莫名的自己的事件不會觸發(fā)，其他元素綁定的事件卻能觸發(fā)該事件

vue中莫名的自己的事件不會觸發(fā)，其他元素綁定的事件卻能觸發(fā)該事件

問題描述

我點(diǎn)擊實(shí)名認(rèn)證服務(wù)協(xié)議 第一次是可以點(diǎn)擊，也可以出現(xiàn)協(xié)議的彈框 但是再次點(diǎn)擊沒有效果 我點(diǎn)擊復(fù)選框的事件可以觸發(fā)協(xié)議的彈框出現(xiàn)

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

我把
<div class="sim-input-agreen" @click="checkAgree" v-bind:class="{checked: isChecked }">
上面綁定的類去了，點(diǎn)擊復(fù)選框也是不會出現(xiàn)彈框的，點(diǎn)擊認(rèn)證服務(wù)協(xié)議也不會出現(xiàn)。

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

<div class="input-agreen"><input type="checkbox" name="" id="isCheck"/>
<div class="sim-input-agreen" @click="checkAgree" v-bind:class="{checked: isChecked }"></div>
<label style="color:#676767;">我已閱讀并同意實(shí)名認(rèn)證服務(wù)協(xié)議的條款</label>
</div>
<approve-dialog :approveDialog="approveDialog"></approve-dialog>

checkAgree 控制復(fù)選框的事件

checkAgree: function () {

    this.isChecked = !this.isChecked;
 }

父組件在data中定義approveDialog默認(rèn)是false
彈框是組件

props來接收 子組件會改變props的值，警告，應(yīng)該是不會影響吧

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

圖片描述
就是這個(gè) 第一次點(diǎn)擊服務(wù)協(xié)議 是刻意正常出來彈框 但是再次點(diǎn)擊這個(gè)事件就不起作用了 點(diǎn)擊控制復(fù)選框確可以控制彈框的顯示

回答
編輯回答
誮惜顏

你的 checkbox 直接 v-model="isChecked" 不就好了，何必這么麻煩還用 jq 去改屬性。

2018年1月30日 12:43
編輯回答
何蘇葉

你組件封裝的有些問題
<approve-dialog :approveDialog="approveDialog"></approve-dialog>
這個(gè)approveDialog既然是你子組件想去改變他，為什么不改成v-model="approveDialog"這樣子去定義呢？
改成v-model之后，組件封裝的代碼也需要改

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

vue官方文檔——自定義組件的-v-model
主要是下面這點(diǎn)

  model: {
    prop: 'approveDialog',
    event: 'change'
  },
  props: {
    approveDialog: Boolean
  },

改成這樣就行了。

2017年4月30日 07:19