Question

我如何通过我的方法来更改道具组件上的src？

这是我的代码

<author
       v-bind:thumbnail="author.thumbnailUrl"
       v-bind:nama="author.id"
       v-bind:deskripsi="author.title"
       @error="pplUrlAlt"
 />

这是我更改src的方法

pplUrlAlt(event) {
            event.target.thumbnail = "https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?ixlib=rb-0.3.5&s=c71d179decac2be7a2c39f8252487f97&auto=format&fit=crop&w=1225&q=80"
        }

在我将模板更改为组件之前，它的工作是更改损坏的img的url，但现在它不起作用了。如何在道具组件上实现此功能？预先感谢！

Answer 1

您非常亲密。请记住，Vue是“数据驱动的”，因此与其尝试直接操作HTML，不如将其集中在组成组件上。当您处理组件的数据时，任何更改都会自动反映在HMTL上。

这就是我要解决的类似问题的方法：

<template>
    <author
       v-bind:thumbnail="error ? errorThumbnail : author.thumbnailUrl"
       v-bind:nama="author.id"
       v-bind:deskripsi="author.title"
       @error="setError"
    />
</template>

<script>
export default {
    data () {
        return {
            error: false,
            errorThumbnail: 'https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?ixlib=rb-0.3.5&s=c71d179decac2be7a2c39f8252487f97&auto=format&fit=crop&w=1225&q=80'
        }
    },
    methods: {
        setError () {
            this.error = true
        }
    }
}
</script>

显然，这是组件外观的简化，但要点是：组件应意识到发生错误的事实，并通过更改其prop值来使子组件以不同的方式呈现。。这尊重了Vue的交流范式：孩子通过事件与父母沟通，父母通过道具与孩子沟通。

如何在Vue.JS上的props组件上传递targer

1 个答案: