What is the Vue equivalent to Angular's "::" one-time binding?

user_1934967 0
Viewed 212

I saw that mixins are a possibility but not only is it overly verbose and clunky to achieve the desired functionality, it'd be super convenient to have a "::" equivalent that is written in the view/template code.

<template>
  <div>
    <div>I am a dynamic/observed binding: {{ integerCounter }}</div>
    <div>I am a one-time binding: {{ ::integerCounter }}</div>
    <button @click="integerCounter += 1">Increment</button>
  </div>
</template>

In the above snippet, assuming integerCounter is instantiated at 0, the one-time binding will display "0" even if the button is clicked. The dynamic one will update on render.

Does such a thing exist?

vuejs2
1 Answers

Excellent example illustrating what you're after but I'm afraid Vue doesn't have anything like this that I'm aware of.

The general advice would be to use two explicit data properties. One could even be a prop which initialises the local copy

<template>
  <div>I am a dynamic/observed binding: {{ counter }}</div>
  <div>I am a one-time binding: {{ initialCounter }}</div>
  <button @click="counter++">Increment</button>
</template>
<script>
export default {
  props: {
    initialCounter: {
      type: Number,
      default: 0
    }
  },
  data: ({ initialCounter }) => ({
    counter: initialCounter
  })
}
</script>
user_2833660
Related