亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue實現兩個元素綁定觸發一個事件

vue實現兩個元素綁定觸發一個事件

慕森王 2019-05-19 14:26:30
題目描述我想通過點擊兩邊的按鈕來觸發內側對應數字里的信息,應該怎樣布局和綁定題目來源及自己的思路我是這樣布局的 然后在考慮當傳入list數據時 怎么讓對應的按鈕和里面的內容綁定 從而觸發事件相關代碼// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)<div class="wrapper"><div class="content-left">  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div></div><div class="content-input">  <div class="content-wrapper">    <div class="content-input-left">      <span class="content-number">{{this.extn}}</span>      <span class="content-number">1008</span>      <span class="content-number">1008</span>      <span class="content-number">1008</span>      <span class="content-number">1008</span>    </div>    <div class="content-input-right">      <span class="content-number">1008</span>      <span class="content-number">1008</span>      <span class="content-number">1008</span>      <span class="content-number">1008</span>      <span class="content-number">1008</span>    </div>  </div>  <div class="bottom-input">    <div class="bottom-input-left">      <div class="logo">logo</div>    </div>    <div class="bottom-input-right">      <div class="u-box">        <p class="u-name">Ukou</p>        <div class="iconfont u-state">&#xea36;</div>      </div>      <div class="ptt-box">        <p class="ptt-name">PTT</p>        <div class="iconfont ptt-state">&#xea35;</div>      </div>      <div class="f-box">        <p class="f-pages">1/1</p>      </div>    </div>  </div></div><div class="content-right">  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div>  <div class="iconfont con-btn">&#xea34;</div></div></div>你期待的結果是什么?實際看到的錯誤信息又是什么?問題描述問題出現的環境背景及自己嘗試過哪些方法相關代碼// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)你期待的結果是什么?實際看到的錯誤信息又是什么?
查看完整描述

2 回答

?
慕后森

TA貢獻1802條經驗 獲得超5個贊

布局就錯了,這個不是左中右布局。


布局模版,樣式自己搞定

<div class="list">

    <div class="item" v-for="(item, index) in list" :key="index">

        <div class="left">

            <button @click="handleClick('leftValue', item)">左側按鈕</button>

        </div>

        <div class="center">

            <input type="text" v-model="item.leftValue">

            <input type="text" v-model="item.rightValue">

        </div>

        <div class="right">

            <button @click="handleClick('rightValue', item)">右側側按鈕</button>

        </div>

    </div>

</div>

list數據

list: [

    {

        leftValue: 1008,

        rightValue: 1008

    },

    {

        leftValue: 1008,

        rightValue: 1008

    }

]

按鈕事件

methods: {

    handleClick (name, item) {

        //點擊后數字+1

        this.$set(item, name, item[name] + 1)

    }

}


查看完整回答
反對 回復 2019-05-19
?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

首先 真的是太感謝您了,解決了我的困擾。
我想讓這十個元素不論有沒有值都一直存在 請您指教

查看完整回答
反對 回復 2019-05-19
  • 2 回答
  • 0 關注
  • 2622 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號