鍍金池/ 問答/HTML/ Vue計算屬性問題：好像 img.src 屬性的變化都不會影響到屬性的計算

Vue計算屬性問題：好像 img.src 屬性的變化都不會影響到屬性的計算

<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 : '#app',
    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>

如上圖直接源碼，目前的場景和上述非常類似，后臺傳回的img src的 前后兩段 url 需要拼接，如果沒有 后段 認(rèn)為沒有圖片，給出一個默認(rèn)的圖片url?，F(xiàn)在的問題在于不管是直接 :src 還是 計算屬性，好像 img.src 屬性的變化都不會影響到屬性的計算，求解，謝謝！

回答
編輯回答
伴謊

data從的img再實例初始化的時候會被添加vue數(shù)據(jù)綁定的方法set和get，而自定義的img.src屬性被不會被添加數(shù)據(jù)綁定，從而不會被vue的觀察者模式檢測到，所以變化也不會被渲染，自定義屬性需要使用this.set('對象'，‘屬性’，‘值’),或者vue.$set

2017年11月21日 21:00
編輯回答
爛人

利用 $set 這個API來設(shè)置可以嗎？

2018年5月6日 01:30
編輯回答
愛是癌

這個是和那個data里邊的對象相關(guān)，vue的文檔里寫的設(shè)置給data的object會遞歸遍歷屬性設(shè)置set get,需要初始化一下。

2017年3月23日 17:23
編輯回答
選擇
<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 : '#app',
  data : {
    img : {
      src: ''
    }
  },
  created : function(){
    var that = this;
    setTimeout(function(){
      that.img.src = 'https://afp.alicdn.com/afp-creative/creative/u124884735/55308755880f8b637dde1f88b84ea9da.png';
    }, 1000);
  },
  computed : {
    'img.src' : function(val){
        return this.img.src == null ? 'www.baidu.com' : 'www' + this.img.src;
    }
  }
});
</script>
</html>
2018年8月30日 08:44