Question

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


       <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

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

vue.js基本功能无法正常运行

1 个答案: