Having issues with getting VueJS to accept dynamic image string

Question

I have seen a few questions similar to this but all revolve around webpack, which I am not currently using.

I have a Vue template:

    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 >`

});

The Ajax retrieval returns an object with the following:

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

However, the Html, doesn't add the src tag to the tag and I'm really not sure why because the data's clearly available.

Much Help would be greatly appreciated.

You have backslashes in your src. Replace those by slashes. — connexo
– connexo, Commented Mar 21, 2018 at 13:49

th3n3wguy · Accepted Answer · 2018-03-21 13:55:20Z

This is happening because Vue's template system doesn't "watch" properties (or nested properties) of an object for changes. If you need to do this, then you can either use the computed property with a watch on the computed property, or you can just create two props instead of the single prop. Here is what I would do to change your code:

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

tony19 · Accepted Answer · 2022-07-16 05:12:40Z

0

Your main issue is that due to the limitations of Javascript, Vue cannot detect property additions in Objects.

Change to

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

Please be aware that it is considered really bad practice to have components modify their props. Rather mirror those props into your vm's data() function in the created() hook of your component, then modify that. If you need the "modified" props outside of your component, emit an event telling those components props has changed.

Also replace the backslashes in your path by slashes:

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

has to be

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

edited Jul 16, 2022 at 5:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 21, 2018 at 13:52

connexo

57.2k15 gold badges112 silver badges149 bronze badges

5 Comments

UncountedBrute Over a year ago

This doesn't seem to have worked. If there is a different implementation you think suits better, please let me know. I am very new to Vue and also complex JS as a whole.

connexo Over a year ago

I'm afraid that to work with complex stuff needs you diving into the complexity - there's no way around that, but Vue.js makes this considerably less painful than e.g. Angular or React...

UncountedBrute Over a year ago

Hi @connexo i completely understand, just wondering if you think i'm going down the completely wrong path or if it is correct just needs tweaking and if so how?

connexo Over a year ago

First and foremost stop manipulating props inside components. Props should be considered read-only inside the component.

bbsimonbb Over a year ago

Do everything connexo says, then ask yourself "why am I modifying a property?" Components should not modify their properties. If your component looks after it's own state then your scenario object should be in the data.

Collectives™ on Stack Overflow

Having issues with getting VueJS to accept dynamic image string

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related