请问如何使data里的字符串变为响应式？

Question

<template>
  <div id="imgs">
    <div class="imgs_box" :style="{backgroundImage:imgsrc_url}" key="default value">
      <transition name="fade">
        <a href="" class="mask">{{img_detail}}</a>
      </transition>
    </div>
      
  </div>
</template>


<script>
export default {
    name:'imgs',
    data(){
      return{
        imgsrc_url : 'url(' + require('../assets/'+this.imgsrc) + ')',
        // imgsrc_url : '',
        
      }
    },
    props:{
      imgsrc: String,
    },


    watch:{//监听路径
      imgsrc_url:function (newval, oldVal){
        console.log(newval);
      },
      deep:true
    },


    mounted() {
      var that = this;
      // this.$set(that.imgsrc_url,'url(' + require('../assets/'+that.imgsrc) + ')');
      // that.imgsrc_url = 'url(' + require('../assets/'+that.imgsrc) + ')';
      //console.log(that.imgsrc_url);
    },
}
</script>

如题代码所示，props里的imgsrc是父组件从后台get过来的一个值（xxx.jpg），这个值是会随着父组件的点击事件改变的，这个值在子组件里要被写入imgsrc_url里，在上方盒子里作为背景图片的地址。

现在的问题是，由watch事件监听得到，imgsrc_url不会自动更新。

网上查了一下是因为data里的字符串直接赋值不是响应式的，我试了vue.set方法却没有赋值成功，请问各位大神怎么才能够吧imgsrc写入imgsrc_url并变成一个能够自动更新的字符串，万分感谢！

Answer 1

你watch 错目标了，你需要 watch imgsrc

<script>
export default {
    name:'imgs',
    data(){
      return{
        imgsrc_url : '',
      }
    },
    props:{
      imgsrc: String,
    },

    watch:{//监听路径
      imgsrc:function (newval, oldVal){
        imgsrc_url = 'url(' + require('../assets/'+newval) + ')'
      },
      deep:true
    },
    
    // ...
}
</script>

代码我没测试，基本就是这个意思，你需要监听 props 属性的变化，来同步子组件的变化。