如何使用Vuetify <v-img> src属性进行双向绑定

Question

我正在将Vue与Vuetify一起使用来创建个人资料页面。我有一个图像，希望对它使用src属性进行双向绑定，以便在选择新图像时可以对其进行更新，但是即使在更新变量值后也无法更改src值，绑定到。

changeImage（）方法中注释掉的代码是我可以使其正常工作的唯一方法，但它看起来很混乱。

<template>
    <v-layout>
        <v-img @click="changeImage()" id="profilePhoto" :src="photoImage" height="300px"></v-img>
    </v-layout>
</template>

<script>
export default {
    data () {
        return {
        photoImage: 'https://www.cntry.biz/wp-content/uploads/2015/12/Female-Coders.jpg',
        }
    },
    methods: {
        changeImage () {
        this.photoImage = 'https://cdn-images-1.medium.com/max/1600/1*_hVfOtWdvZVq4Ct7x6PtyA.jpeg'
        // const image = document.getElementById('profilePhoto').getElementsByClassName('v-image__image--cover')[0]
        // image.setAttribute('style', 'background-image: url(' + this.photoImage + ');')
        }
    }
}
</script>

我希望当我更改photoImage变量时，它将更新

中的照片