DEV Community

Cover image for Things that won’t work using Vue
Winner Crespo
Winner Crespo

Posted on • Originally published at winnercrespo.com on

Things that won’t work using Vue

After using Vue for a while, I have found some issues that later I learned are actually things they warned us in the documentation.

I made a list of these issues so you can know them as well. Let’s describe each and see the options we have to solve them.

Array Changes

Let’s say we have this:

const vm = new Vue({
  data: {
    titles: ['Ready Player One', 'The Power of Less', 'The 10x rule']
  }
})
Enter fullscreen mode Exit fullscreen mode

We can get two different issues while trying to do changes to titles:

  • Setting an item using the index: vm.titles[index] = newTitle
  • Modifying the length: vm.titles.length = length

Instead of setting an item using the index directly you can use Vue.set:

Vue.set(vm.titles, index, newTitle)
Enter fullscreen mode Exit fullscreen mode

Another alternative is using splice:

vm.titles.splice(index, 1, newTitle)
Enter fullscreen mode Exit fullscreen mode

On the other hand, to modify the length you can use splice as well:

vm.titles.splice(length)
Enter fullscreen mode Exit fullscreen mode

Adding properties to an object

Having the following object:

const vm = new Vue({
  data: {
    top: {
      bestMovie: 'Avengers: Infinity War'
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

We could be tempted to add a new property doing the next:

vm.top.bestShow = 'Breaking Bad'
Enter fullscreen mode Exit fullscreen mode

but then bestShow won’t be reactive because Vue adds the reactive functionality at the moment of the initialization. Which means that the property must be in the data object in order to be reactive.

We can use Vue.set again to accomplish this:

Vue.set(vm.top, 'bestShow', 'Breaking Bad')
Enter fullscreen mode Exit fullscreen mode

Although, if you need to add several properties, maybe would be better to create a fresh object combining them:

vm.top = Object.assign({}, vm.top, { bestShow: 'Breaking Bad', bestBook: 'Ready Player One' })
Enter fullscreen mode Exit fullscreen mode

Using $refs before the component is mounted

Let’s say we want to focus an input on our component. We could use the ref attribute for that:

<input ref="input" />
Enter fullscreen mode Exit fullscreen mode

and then:

methods: {
  focusInput: function () {
    this.$refs.input.focus()
  }
}
Enter fullscreen mode Exit fullscreen mode

What if we want to focus it as soon as the component is created? You would say that we could use the created hook:

created() {
  this.$refs.input.focus()
}
Enter fullscreen mode Exit fullscreen mode

but actually, this produces an error because $refs is populated after the component has been mounted. So, we should use the mounted hook instead since it will be already populated:

mounted() {
  this.$refs.input.focus()
}
Enter fullscreen mode Exit fullscreen mode

Toggling similar elements

Vue sometimes will reuse elements that have the same tag name when using v-if on them. As you can see in the next example, the input element is reused when the toggle button is pressed.

To notice this you can write something in the input and then press the button (the value won’t change) or you can use the dev tools and see that the element is not replaced:


To solve this we just need to add a key to each of them so Vue knows they are distinct elements:


Now we can see that the element is replaced every time we click the button.

Have you noticed other things that won’t work on Vue? Please share in the comments.

Top comments (0)