在 Vue 中加载 DOM 之前运行一个方法答案

【问题标题】：Run a method before a DOM is loaded in Vue在 Vue 中加载 DOM 之前运行一个方法
【发布时间】：2020-05-04 05:08:23
【问题描述】：

我有一个 img 标签，它的值会根据数据而改变。但我面临的问题是当 DOM 中的值没有改变但我使用 console.log 在控制台中看到值时。在 userImage 方法中，如果 day shift 的值为 manager，我将在 image 标记中添加一个图像。我可以在控制台中看到该图像标签更改为<img class="workerid" src="/users/manager.png">，但如果我检查图像标签，它只是<img class="workerid" >。 src 没有出现，这就是图像没有出现的原因。也许我错了，但我认为这是因为图像是在 DOM 之后加载的。请帮我解决这个问题。

<v-form :model='management'>
  <div class="user">
   <img class="workerid" ref="workerid"/>
  </div>
</v-form>

<script>
      export default {
        data() {
          return {
            days: [
              {text: '01'},
              {text: '02'},
              {text: '03'},
              {text: '04'},
              {text: '05'},
              {text: '06'},
              {text: '07'}
            ],
            week: {
              day: '',
              daily_shift: ''
            },
            users: [
             { src: "/users/manager.png" }
            ]
        }
        created: function() {
          this.fetchWeek();
          this.userImage();
        }
        methods: {
         fetchWeek() {
          this.$axios.get('/week.json')
          .then(response => {});
         }
         userImage() {
           var user_type_image = -1;
           if (week.day_shift === "manager") {
            user_type_image = 0;
            $(this.$refs.workerid).attr("src", this.users[user_type_image].src).show();
            console.log($(this.$refs.workerid).attr("src", this.users[user_type_image].src).show());
           }
           else{
            $(this.$refs.workerid).attr("src", "").hide();
           }
         }
       }
     }
</script>

【问题讨论】：

请为此使用codesandbox.io 创建一个small demo 以显示正在发生的问题。
您正在created 钩子中执行userImage，但该阶段不存在DOM。尝试在 mounted 钩子中执行它

标签： javascript vue.js vuetify.js

【解决方案1】：

我真的不建议混合使用 Vue 和 jQuery。

相反，您应该使用标准 Vue 控件来控制图像源和可见性。

例如

<img class="workerid" v-show="isManager" :src="workerIdImage">

在你的<script>

computed: {
  isManager () {
    return this.week.daily_shift === 'manager'
  },
  workerIdImage () {
    if (this.isManager) {
      let user_type_image = 0 // not sure if this is meant to come from elsewhere

      // you need to use 'require()' when referencing dynamic image asset paths
      return require(this.users[user_image_type].src)
    }
    return ''
  }
}

您现在也可以删除userImage 方法。

【讨论】：