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的模板系统没有观察＆＃34;用于更改的对象的属性（或嵌套属性）。如果您需要这样做，那么您可以在计算属性上使用computed属性watch，或者只创建两个props而不是单prop }。以下是我要更改代码的方法：

＆＃13;

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 >`
});

＆＃13;

Answer 2

您的主要问题是，由于Javascript的限制，Vue cannot detect property additions in Objects。

更改为

$function();

请注意，让组件修改其retrieveScenario: function () { Get("ScenariosVue", "GetScenario", 1, this, (c, data) => { Vue.set(this.data, 'scenarios', data); }, (c, errors) => { console.log(errors); } ); }被认为是非常糟糕的做法。而是将这些道具镜像到组件的props钩子中的vm的data（）函数中，然后修改它。如果您需要＆＃34;修改＆＃34;组件外部的道具，发出一个事件，告诉那些组件道具已经改变。

还用斜杠替换路径中的反斜杠：

created()

必须是

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

让VueJS接受动态图像字符串

2 个答案: