使用Vue.js(cdn)切换显示/隐藏特定元素

Question

我正在使用Vue.js(cdn)和axios从heroku和mlab中获取东西.

我想显示列表中对象的一些信息,我希望每一行都像一个按钮,或者有一些onclick,显示来自下面同一个对象的更多信息.像下拉.

我尝试了按钮v-on:click ="visible =!visible"...并且它可以正常工作,但它会切换显示/隐藏所有元素,如预期的那样.

我希望能够在众多列表中的单个元素上切换显示/隐藏.

这就是我所拥有的:

的index.html

<div id="app">
    <div class="list" v-for="drinks in rom">
        <button v-on:click="visible = !visible">{{ drinks.brand }}</button>

        <div class="hidden" v-show="!visible">
            <p> {{ drinks.comment }} </p>
        </div> 
    </div><!--list-->
    </div><!--app-->

main.js

new Vue({
el: '#app',
data() {
    return {
        rom: null,
        visible: true
    }
},
mounted() {
    axios
        .get('******')
        .then(response => (this.rom  = response.data))
}})

我能做什么？

Answer 1

你想要将rom声明为一个数组:

data() {
    return {
        rom: []
    }
},

然后,您可以visible为API响应中的每个数据项添加属性:

mounted() {
    axios
        .get('******')
        .then(response => (this.rom = response.data.map(drinks => {
                drinks.visible = true;
                return drinks;
            })
        ))
}})

然后你可以visible在你的每个循环中使用该属性v-for:

<div class="list" v-for="drinks in rom">
    <button v-on:click="drinks.visible = !drinks.visible">{{ drinks.brand }}</button>

    <div class="hidden" v-show="!drinks.visible">
        <p> {{ drinks.comment }} </p>
    </div> 
</div><!--list-->