Vue calculation attribute problem: it seems that changes in img.src attributes will not affect the calculation of attributes.

<html>
<head>
</head>
<body>
<div id="app">
    <img :src="imgsrc"/>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
    el : "-sharpapp",
    data : {
        img : {}
    },
    created : function(){
        var that = this;
        setTimeout(function(){
            that.img.src = 100;
        },1000);
    },
    computed : {
        imgsrc : function(){
            return this.img.src == null ? "www.baidu.com" : "www" + this.img.src;
        }
    }
});
</script>
</html>

as the direct source code in the figure above, the current scenario is very similar to the above. The two url segments of the img src returned by the background need to be stitched together. If there is no image in the latter paragraph, a default image url is given. The problem now is that whether it is directly: src or computing attributes, it seems that changes in img.src attributes will not affect the calculation of attributes, solution, thank you!

Mar.04,2021

this is related to the object in that data. The object that is set to data in the vue document will recursively traverse the property to set the set get, to be initialized.


is it possible to use the API of $set to set it?


<html>
<head>
</head>
<body>
<div id="app">
  <img :src="img.src"/>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
  el : '-sharpapp',
  data : {
    img : {
      src: ''
    }
  },
  created : function(){
    var that = this;
    setTimeout(function(){
      that.img.src = 'https://img.codeshelper.com/upload/img/2021/03/04/ipi1mel224g3349.png';
    }, 1000);
  },
  computed : {
    'img.src' : function(val){
        return this.img.src == null ? 'www.baidu.com' : 'www' + this.img.src;
    }
  }
});
</script>
</html>

data from the img reinstance initialization will be added vue data binding methods set and get, while the custom img.src property will not be added data binding, so it will not be detected by vue observer mode, so the change will not be rendered, custom properties need to use this.set ('object', 'attribute', 'value'), or vue.$set

Menu