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

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