绑定数据的问题

绑定数据的问题

<ul
 v-for="(item, i) in section"
 :key="i"
>
 <li class="cart-goods">
   <div class="cart-goodsLeft">
     <div></div>
     <div><img :src="item[2]" alt=""></div>
   </div>

   <div class="cart-item">
     <h1>{{item[1]}}</h1>
     <span>{{item[5]}}</span>
     <div class="cart-item-bottom">
       <span class="cart-price">¥{{item[3]}}</span>

       <ul  class="cart-num">
         <li @click="subtract">-</li>
         <li>
           <input type="text" v-model="item[6]">
         </li>
         <li @click="add">+</li>
       </ul>
       <span>库存{{item[4]}}</span>

     </div>
   </div>

 </li>
</ul>

类似于这些

           <input type="text" v-model="item[6]">

       <span>库存{{item[4]}}</span>

如何在data里去绑定v-model="item[6]" 的 item[6]

实现通过方法如加减改变data再修改input的值呢~

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好!

这样的方法就是可行的。

直接在data里绑定一个对应的键就行,然后input里面 v-model="(data绑定的键)"

单击事件里面改变data里的数据就可以了

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 阿感 提问者 #1
    嗯,老师这个对这种循环出来的数组数据不行,不能直接绑定; let obj = item[6]; this.$set(item, 6, --obj); 通过查资料和api,有对数组的这个说明,通过$set方法把这数组像对象一样添加了属性值
    2019-06-27 21:01:48
  • 阿感 提问者 #2
    循环出来不能直接data绑定再methods修改是因为,一改的话,页面所有Li的input输入框都被更改了
    2019-06-27 21:02:57
  • 好帮手慕码 回复 提问者 阿感 #3
    是的哦,Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。 看得出来,同学很棒。通过查阅资料去学习是后期工作中的常态,因为工作中大多数都是需要自己解决问题的,继续加油哦 如果帮助到了你 欢迎采纳 祝学习愉快~
    2019-06-28 09:58:20
提问者 阿感 2019-06-24 22:10:56

目前没想到办法绑定,想到可以用点击事件传参,然后item[6]就能够打印出input的值了

<li @click="subtract(item)">-</li>


subtract(item) {
 console.log(item[6]);

}

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师