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: []
    }
},

然后，您可以向API响应中的每个数据项添加visible属性：

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

Answer 2

您可以向饮料对象添加可见属性，然后

v-on:click="drink.visible = !drink.visible"

或者您可以创建一个数组，将饮料映射为ID为键，值为true或false，然后：

v-on:click="drinksVisibility[drink.id].visible = !drinksVisibility[drink.id].visible"

Answer 3

您可以在每个对象中都有一个visible属性并渲染元素

rom : [{brand: 'drink1',visible: false,comment: 'drink1 - comment'},
  {brand: 'drink2',visible: false,comment: 'drink2 - comment'}]

然后编写一个切换函数，以通过传递索引值来修改/显示特定对象的可见值true / false，以显示/隐藏元素

<button v-on:click=toggle(index)>{{ drinks.brand }}</button>

示例：https://codepen.io/sandeep821/pen/YdxjWg

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

3 个答案: