vue.js 基本功能无法正常工作

Posted 2023-02-23

【中文标题】vue.js 基本功能无法正常工作

【英文标题】：vue.js basic function not working as wanted

【发布时间】：2020-10-13 10:31:55

【问题描述】：

我创建了一组 div 对，它们使用 v-for 方法从数组中的一组虚拟对象中获取数据。当我单击可见 div 时，目标是每对 div 会打开相应的相关 div。目前，我作为方法对象的属性附加的函数仅打开第一对 div 的不可见 div，即使我单击第三个可见 div，它仍然显示不可见 div。我正在使用 vue 框架。 我附上了我的代码的图片，然后是实际的代码。 [我试图打开的 div 是点击会话的详细信息 atm，它只为第一个索引打开][1]

       <div class = "rowuserlog" id="log-container" v-for="session in sessions" :key="session.id" 
>
    <div id="log-container-user-row-1">


      <div id="profile-log-title" @click="logToggler()"> session.name </div>
        <div id="profile-log-date"> session.date</div>
          <div id="user-log-metric-container">
            <div id ="user-log-hr" class="log-metric">session.hr</div>
            <div id ="user-log-time" class="log-metric"> session.time</div>
            <div id ="user-log-meters" class="log-metric"> session.distance </div>
           
    <div id="session-onclick-details">
      <div id="log-comments">
        session.comments
      </div>
      <div id="log-edit-buttons">
        <button id="log-save" class="log-edit-button"> Save </button>
        <button id="log-delete" class="log-edit-button"> Delete </button>
        <button id="log-cancel" class="log-edit-button"> Cancel </button>
        <button id="log-edit" class="log-edit-button"> Edit </button>

      </div>
    </div>
                ```

My method
The toggler is the method I want:Here is the code 

  methods:
    logToggler () 
     const extraInfoLog = document.getElementById("session-onclick-details");
         return extraInfoLog.style.display="block";
   
  ]

[2]


  [1]: https://i.stack.imgur.com/ddrYo.png
  [2]: https://i.stack.imgur.com/evriF.png

【参考方案1】：

data() 
    return 
       sessions:[
                  name:'test',
                   value:false,
                   id:1
                 ,
                  name:'test1',
                   value:false,
                   id:2
                 ,
                  name:'test2',
                   value:false,
                   id:3
                 
                ]
  
           
     


methods:
 logToggler(_index) 
   for(let index=0;index<sessions.length;index++) 
     if(index == _index)
      sessions[index].value = true
     else
      sessions[index].value = false
   
 


Template

 <div class = "rowuserlog" id="log-container" v-for="(session,index) in sessions" :key="session.id" 
>
<div id="profile-log-title" @click="logToggler(index)" v-if="session.value"> session.name </div>