Javascript 更新Vue.js中的嵌套属性

在我的Vue.js应用程序中，当从

文件

输入中选择文件时，我有一种方法来更新图像的

src

属性。此方法的调用方式如下：

<input type="file" accept=".jpg,.png" @change="updateSrc($event, 'profile.photo.path')">
<img :src="profile.photo.path">

let app = new Vue({
    el: "#app",
    data: {
        profile: {
            photo: {
                path: "images/profile/no-photo.png"
            },
        }
    },
    methods: {
        updateSrc: function (event, srcPropertyName) {
            let reader = new FileReader();

            reader.onload = readerEvent => {
                srcPropertyName.split(".").reduce((previousValue, currentValue, index, array) => {
                    if (index === array.length - 1) {
                        previousValue[currentValue] = readerEvent.target.result;
                    }

                    return previousValue[currentValue];
                }, this);
            };

            reader.readAsDataURL(event.target.files[0]);
        },
    },
});

app.$set("profile.photo.path", "james.jpg");

它工作得很好，但我开始思考是否真的需要在这里使用技巧，就像我在

array.reduce（）中所做的那样。嵌套此属性时，是否有方法按名称更新Vue.js属性？大概是这样的：

<input type="file" accept=".jpg,.png" @change="updateSrc($event, 'profile.photo.path')">
<img :src="profile.photo.path">

let app = new Vue({
    el: "#app",
    data: {
        profile: {
            photo: {
                path: "images/profile/no-photo.png"
            },
        }
    },
    methods: {
        updateSrc: function (event, srcPropertyName) {
            let reader = new FileReader();

            reader.onload = readerEvent => {
                srcPropertyName.split(".").reduce((previousValue, currentValue, index, array) => {
                    if (index === array.length - 1) {
                        previousValue[currentValue] = readerEvent.target.result;
                    }

                    return previousValue[currentValue];
                }, this);
            };

            reader.readAsDataURL(event.target.files[0]);
        },
    },
});

app.$set("profile.photo.path", "james.jpg");

这显然行不通。有什么简单的方法吗？
您已经创建了一个可以被认为是实用函数的功能，用于向基本元素添加行为。但它不是一个实用函数，因为它只能应用于基本元素类型。从概念上讲，您有一个小部件：一个扩展的元素，具有您将重复使用的自定义行为。正确的做法是制作一个组件。然后您可以
v-model
源名称或
.sync
自定义属性名称

img
是否可以包含在小部件模板中。在你的情况下，还不清楚是否应该这样做


newvue({
el:“应用程序”，
数据：{
简介：{
照片:{
路径：“images/profile/no photo.png”
},
}
},
组成部分：{
阅读内容：{
模板：“#读者事物模板”，
道具：['src']，
方法：{
updatesc（）{
const reader=new FileReader（）；
reader.onload=readerEvent=>{
此.emit（'update:src'，readerEvent.target.result'）；
};
reader.readAsDataURL（event.target.files[0]）；
}
}
}
}
});
那么，也许只需要回调就可以了


newvue({
el:“应用程序”，
数据：{
简介：{
照片:{
路径：“images/profile/no photo.png”
},
}
},
方法：{
changeSrc（事件、回调）{
const reader=new FileReader（）；
reader.onload=readerEvent=>{
回调（readerEvent.target.result）；
};
reader.readAsDataURL（event.target.files[0]）；
}
}
});

这更多的是您正在寻找的实用功能，因此，Vue不会实现这一功能。不过洛达斯有这个~是的，我知道洛达斯。我很好奇它在纯Vue.js中是否可行，因为它大量使用反应性数据。我明白你的意思，这就是Vue的特点。它的目标不是做每件事，只是它的设计目的。我被你的问题弄糊涂了！为什么不这样做呢。profile.photo.path='james.jpg'。如果我离主题很远，我很抱歉为什么不把路径分成两个参数，适合与
$set
一起使用<代码>更新SC（$event，profile.photo，'path'）
v-model和@change的组合？我不喜欢它。我不喜欢它，因为它错误地使用了
v-model
。最好是引入自定义属性，而不要让一个不符合预期功能的属性如此混乱。是否有任何方法可以创建定制的
v-model
实现，实际上可以作为内置实现工作？也就是说，对于
文件
输入，它只会在文件更改时更新属性。请记住我对这里很好奇。我对我自己的解决方案很满意，实际上我更喜欢我的解决方案。但如果我们能想出比两者都好的方法，我完全同意。v-model的用法不是错误的，它正是v-model应该做的：一个
值
参数的双向绑定。如果需要自定义属性，可以使用一个，使用和
emit
标记为
update
的事件。这是一个很小的风格诡辩。对不起，出于某种原因，我以为你在使用一个附加属性。这样就可以了，但我更愿意将其保留在
上，而不是自定义模板上。