vue实现两个元素绑定触发一个事件

Question

题目描述我想通过点击两边的按钮来触发内侧对应数字里的信息，应该怎样布局和绑定题目来源及自己的思路我是这样布局的 然后在考虑当传入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>你期待的结果是什么？实际看到的错误信息又是什么？问题描述问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

布局就错了，这个不是左中右布局。

布局模版,样式自己搞定

<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)

    }

}

Answer 2

首先 真的是太感谢您了，解决了我的困扰。
我想让这十个元素不论有没有值都一直存在 请您指教