Javascript 在让VueJS接受动态图像字符串时遇到问题

我看到了一些类似的问题，但都是围绕着webpack，我目前没有使用

我有一个Vue模板：

    var question = Vue.component('question', {
    props: {
        scenario: { type: Object }
    },
    beforeMount: function () {
        this.retrieveScenario();
    },
    methods: {
        postChoice: function () {
            Post("Study", "PostScenarioChoice")
        },
        retrieveScenario: function () {
            Get("ScenariosVue", "GetScenario", 1, this,
                (c, data) => { this.scenario = data; },
                (c, errors) => { console.log(errors); }
            );
        }
    },

    template:
        `<div class="visible">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <a v-on:click="this.postChoice">
                            <img class="img-fluid" v-bind:src="scenario.scenarioLeftImg" />
                        </a>
                </div>
                <div class="col-lg-6">
                    <a v-on:click="this.postChoice">
                        <img class="img-fluid" v-bind:src="scenario.scenarioLeftImg" />
                    </a>
                </div>
            </div>
            </div >`

});

然而，Html并没有将src标记添加到标记中，我真的不知道为什么，因为数据显然是可用的

---

非常感谢您的帮助。

您的主要问题是由于Javascript的局限性

改为

retrieveScenario: function () {
        Get("ScenariosVue", "GetScenario", 1, this,
            (c, data) => { Vue.set(this.data, 'scenarios', data); },
            (c, errors) => { console.log(errors); }
        );
    }

请注意，让组件修改其

道具

被认为是非常糟糕的做法。而是将这些道具镜像到组件的

created（）

hook中vm的data（）函数中，然后修改它。如果您需要组件外部的“修改”道具，请发出事件，告知这些组件道具已更改

还可以用斜线替换路径中的反斜线：

scenarioLeftImg: "images\\Scenarios\\bolard_dog_Left.png", 
scenarioRightImg: "images\\Scenarios\\bolard_dog_Right.png",

一定是

scenarioLeftImg: "images/Scenarios/bolard_dog_Left.png", 
scenarioRightImg: "images/Scenarios/bolard_dog_Right.png",

---

之所以会发生这种情况，是因为Vue的模板系统不会“监视”对象的属性（或嵌套属性）进行更改。如果需要执行此操作，则可以将

computed

属性与计算属性上的

watch

一起使用，也可以只创建两个

prop

而不是单个

prop

。以下是我将如何更改您的代码：

var question=Vue.component（'question'{
道具：{
//将此道具更换为以下两个道具。
//场景：{type:Object}
scenarioLeftImg:{type:String}，
scenarioRightImg:{type:String}
},
beforeMount:函数（）{
this.retrieveScenario（）；
},
方法：{
后选项：功能（）{
Post（“研究”、“后场景选择”）
},
retrieveScenario:函数（）{
获取（“场景”，“场景”，1，这个，
（c，data）=>{this.scenario=data；}，
（c，错误）=>{console.log（错误）；}
);
}
},
模板：
`
`
});

您的

src

中有反斜杠。用斜杠代替。嗨@connexo，你这么做了，但没用。我很担心你的答案。这似乎没用。如果有一个不同的实现，你认为更适合，请让我知道。我是Vue的新手，也是一个复杂的JS整体。我担心处理复杂的东西需要你深入到复杂性中去——这是没有办法的，但是Vue.JS使这比Angular或React要痛苦得多……嗨@connexo，我完全理解，只是想知道你是否认为我走的是一条完全错误的道路，或者它是正确的，只是需要调整一下，如果是，怎么做？首先，停止操纵组件内部的

props

。道具在组件内部应该被视为只读的。按照connexo说的做，然后问自己“为什么我要修改属性？”组件不应该修改它们的属性。如果组件负责自己的状态，那么场景对象应该在数据中。

scenarioLeftImg: "images/Scenarios/bolard_dog_Left.png", 
scenarioRightImg: "images/Scenarios/bolard_dog_Right.png",