代码之家 › 专栏 › 技术社区 › ajthinking

Vue数据属性不响应

reactive vue.js

ajthinking · 技术社区 · 6 年前

考虑到下面的代码,我不能 active 数据属性是被动的。在本例中,我只想在图像的鼠标上方显示div。

<template>
    <div>
        <img @mouseover="showInfo" class="cursor-pointer w-full" :src="project.images[0].url" width="100%">
        <div v-show="active" class="bg-red h-12">
            Info about the image
        </div>
    </div>    
</template>

<script>
    export default {
        props: ['project'],
        data: function () {
            return {
                active: false
            }
        },
        methods: {
            showInfo: () => {
                this.active = !this.active;
            }
        }
    }
</script>

忙碌的

4 回复 | 直到 6 年前

Fab 6 年前

不要使用箭头函数来定义方法, this 这是行不通的。

替换

        showInfo: () => {
            this.active = !this.active;
        }

        showInfo() {
            this.active = !this.active;
        }

Satyam Pathak 6 年前

如果您只需更改 HTML 你不需要一个单独的方法。

@mouseover="active = !active"

看起来是这样的,,

<div>
   <img @mouseover="active = !active" class="cursor-pointer w-full" :src="project.images[0].url" width="100%">
   <div v-show="active" class="bg-red h-12">
     Info about the image
   </div>
</div>

Michael Mano 6 年前

data() {
    return {
         active: false
     }
},

像上面那样更新您的数据。

toggleInfo 因为它也可以在鼠标上隐藏它。

toggleInfo() {
     this.active = !this.active;
 }

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前