$refs returns undefined in vue js

Question

I'm having difficulty using the reference, ref, of a tag as it currently returns null. Parts of the code is shown below:

<input-layout v-if="edit" label="Status" class="" ref="statusSubtitle">
        <u-select v-model='item.status' :options="adStatus" :disable="disable" tabindex="14" class="" ref="itemStatusDropDown"/>
</input-layout>

mounted () {
    this.$nextTick(function (){
      console.log("222 " + this.$refs.itemStatusDropDown)
      console.log("333 ", this.$refs.statusSubtitle)
    })
  },
computed: {
  edit () {
        //return true
        return this.item.getId() != null
      },
}

Currently the console.logs inside the mounted hook return undefined. The problem here is that what's in the edit() function is asynchronous, as a result the v-if="edit" is still false by the time the mounted hook gets triggered. I want to add a class property to the tags <input-layout> and <u-select> hence my thought process was to do:

this.$refs.statusSubtitle.class.value = "makeItGray"
this.$refs.itemStatusDropDown.class.value = "makeItGray"

However, since this.$refs.statusSubtitle and this.$refs.itemStatusDropDown return undefined I can't add the class properties.

How do I add a value to the class properties in this case? Maybe there is a work around that I'm not thinking of?

Note: If I force the edit() method to return true then ref is no longer undefined. But in this case, the edit() method is doing an asynchronous task.

tony19 · Accepted Answer · 2022-07-15 00:25:39Z

2

For this case I would watch the edit computed.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    status: false
  },
  computed: {
    edit() {
      return this.status;
    }
  },
  watch: {
    edit: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          if (this.$refs.myRef) {
            console.log(this.$refs.myRef);
            this.$refs.myRef.style.backgroundColor = 'green'
          }
        })
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="status = !status">toggle</button>
  <p v-if="edit" ref="myRef">{{ edit }}</p>
</div>

https://v2.vuejs.org/v2/guide/computed.html#Watchers

edited Jul 15, 2022 at 0:25

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 15, 2021 at 19:41

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

$refs returns undefined in vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related