javascript - 让 VueJS 接受动态图像字符串有问题

Question

我看过一些类似的问题，但都是围绕 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 >`

});

Ajax 检索返回一个包含以下内容的对象:

returned 
Object { 
    scenarioId: 1, 
    description: "Dog vs Bolard", 
    scenarioLeftImg: "images\\Scenarios\\bolard_dog_Left.png", 
    scenarioRightImg: "images\\Scenarios\\bolard_dog_Right.png",
    participantScenarios: [], 
    scenarioTypesScenarios: [] 
}

但是，Html 没有将 src 标签添加到标签中，我真的不确定为什么，因为数据很清楚。

非常感谢您的帮助。

Answer 1

这是因为 Vue 的模板系统不会“监视”对象的属性(或嵌套属性)的变化。如果您需要这样做，那么您可以在计算属性上使用 computed 属性和 watch，或者您可以只创建两个 props 而不是单个 prop。以下是我将如何更改您的代码:

var question = Vue.component('question', {
  props: {
    // Replace this prop with the two below.
    // scenario: { type: Object }
    scenarioLeftImg: { type: String },
    scenarioRightImg: { type: String }
  },
  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="scenarioLeftImg" />
          </a>
        </div>
        <div class="col-lg-6">
          <a v-on:click="this.postChoice">
            <img class="img-fluid" v-bind:src="scenarioLeftImg" />
          </a>
        </div>
      </div>
    </div >`
});