在v-for列表项目中显示和隐藏div（Vue.js 2）

我有一个v-for循环，并且当该循环中的项目被点击时，我想隐藏div＃1并显示div＃2。然后点击div＃2中的按钮来隐藏并再次显示div＃1。仅限于该列表项目。在v-for列表项目中显示和隐藏div（Vue.js 2）

模板：

<div v-for="slider in slideritems"> 
    <div v-if="!showEdit" @click="openEditor(slider)"> 
     Normal list item, click to show edit options 
    </div> 
    <div v-if="showEdit"> 
     <div @click="closeEditor(slider)">Close</div> 
     Edit options (if selected) 
    </div> 
</div>

脚本：

export default { 
    methods: { 
     openEditor(slider) { 
      slider.showEdit = true 
     }, 
     closeEditor(slider) { 
      slider.showEdit = false 
     } 
    } 
}

来源

2017-02-11 Jack Barham

你从来没有定义'closeEditor'方法 - 你有两个'openEditor'方法。这只是一个错字吗？另外，你真正的问题是什么？有什么不工作？ – PatrickSteele

当然，这是一个错误输入到SO，它并没有真正解决这个问题。我已经稍微更新了我的问题。我想要显示并隐藏循环内的某些div。但只限于该项目。 –

因为你的方法翻动滑块对象的showEdit成员，我想你想v-if势必slider.showEdit，不只是showEdit：

<div v-for="slider in slideritems"> 
    <div v-if="!slider.showEdit" @click="openEditor(slider)"> 
     Normal list item, click to show edit options 
    </div> 
    <div v-if="slider.showEdit"> 
     <div @click="closeEditor(slider)">Close</div> 
     Edit options (if selected) 
    </div> 
</div>

这里有一个工作jsFiddle：https://jsfiddle.net/psteele/wn1npgqu/

来源

2017-02-11 21:34:26 PatrickSteele

在v-for列表项目中显示和隐藏div（Vue.js 2）

回答

相关问题