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">&nbsp; &nbsp; <div class="item" v-for="(item, index) in list" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="handleClick('leftValue', item)">左侧按钮</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" v-model="item.leftValue">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" v-model="item.rightValue">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="handleClick('rightValue', item)">右侧侧按钮</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>list数据list: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; leftValue: 1008,&nbsp; &nbsp; &nbsp; &nbsp; rightValue: 1008&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; leftValue: 1008,&nbsp; &nbsp; &nbsp; &nbsp; rightValue: 1008&nbsp; &nbsp; }]按钮事件methods: {&nbsp; &nbsp; handleClick (name, item) {&nbsp; &nbsp; &nbsp; &nbsp; //点击后数字+1&nbsp; &nbsp; &nbsp; &nbsp; this.$set(item, name, item[name] + 1)&nbsp; &nbsp; }}

Answer 2

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