[Vuejs]-VueJS life cycle with canvas, switching components

by

0👍

✅

You use a non-reactive variable inside v-if statements. This is not supported and the net effect is that the v-if evaluation doesn’t changes, even if color does, so it’s always the same component being rendered.

Switch to using a color data property in the parent component and, for example, use v-model or v-bind:value to use it (as described in Using-v-model-on-Components in the guide).
In the parent:

<template>
  ...
    <canvas-test v-if="color == 'red'" v-model="color"  canvasKey="1"></canvastest>
    <canvas-test v-if="color == 'blue'" v-model="color" canvasKey="2"></canvas-test>
  ...
</template>
<script>
...
export default {
  data () {
    ...
    color: 'red',
    ...
  }
  ...
  components: {
    CanvasTest
  }
  ...
}
</script>

in the canvas component:

<script>
...
export default {
  ...
  props: ['value'],  // the color is in 'value'
  ...
}
</script>

If you only want to have multiple components with different properties, just define their properties using props.

Leave a comment