Nuxt•2mo ago

Stuck with reactivity not working

Gpt, claude, meta, asked everywhere. Seems there isnt a solid response why this snippet isnt working.

<template>
      <div class=" mx-2 md:mx-20 lg:mx-20 bg-white my-5 p-5 rounded-3xl flex flex-wrap flex-col gap-2">
      <div class="font-bold text-2xl flex "><div class="bg-slate-100 flex-shrink-0 py-1 px-2 hover:bg-slate-400 border-4 border-slate-400/40 rounded-2xl">{{ title }}</div></div>
      <div class="text-xl text-slate-700" v-html="content"></div>
      <div>{{ my_redis_value.value }}</div>
    <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

      </div>
</template>

<script setup> 


const props = defineProps({
  mykey: {
    type: [String],
    required: true,
    default: 'default value props'
  },
  title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        default: 'us.'
    },
});


const my_redis_value = ref('');

async function fetchRedisValue(key) {
  my_redis_value.value = await read_redis_key(key);
  console.log('line 50 - value of redis value', my_redis_value.value)
  console.log('line 51 - value of read redis', await read_redis_key(key))
}

watch(() => props.mykey, (newKey) => {
  fetchRedisValue(newKey);
});

<template>
      <div class=" mx-2 md:mx-20 lg:mx-20 bg-white my-5 p-5 rounded-3xl flex flex-wrap flex-col gap-2">
      <div class="font-bold text-2xl flex "><div class="bg-slate-100 flex-shrink-0 py-1 px-2 hover:bg-slate-400 border-4 border-slate-400/40 rounded-2xl">{{ title }}</div></div>
      <div class="text-xl text-slate-700" v-html="content"></div>
      <div>{{ my_redis_value.value }}</div>
    <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

      </div>
</template>

<script setup> 


const props = defineProps({
  mykey: {
    type: [String],
    required: true,
    default: 'default value props'
  },
  title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        default: 'us.'
    },
});


const my_redis_value = ref('');

async function fetchRedisValue(key) {
  my_redis_value.value = await read_redis_key(key);
  console.log('line 50 - value of redis value', my_redis_value.value)
  console.log('line 51 - value of read redis', await read_redis_key(key))
}

watch(() => props.mykey, (newKey) => {
  fetchRedisValue(newKey);
});

Context: props.mykey is a changing value. When the value matches some key at the redis database the template should show that redis value. The function await read_redis_key(key) work and logs line 50 and line 51 show the expected result. However, on the template this snippet is showing up as empty (undefined)

  <div>{{ my_redis_value.value }}</div>
  <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

  <div>{{ my_redis_value.value }}</div>
  <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

3 Replies

IsaacR943OP•2mo ago

LINE 6x show 'undefined' always, despite lines 50 and 51 show the proper result. update - what solved the issue for me was changing the watch to:

watch(() => props.mykey, async (newKey) => {
  await fetchRedisValue(newKey);
  await nextTick();
  console.log('line 5x watchEffect - my_redis_value:', my_redis_value.value);
  isLoading.value = false;
});

watch(() => props.mykey, async (newKey) => {
  await fetchRedisValue(newKey);
  await nextTick();
  console.log('line 5x watchEffect - my_redis_value:', my_redis_value.value);
  isLoading.value = false;
});

that only using

my_redis_value

my_redis_value

instead of

my_redis_value.value

my_redis_value.value

(only for the template tho)

Alan•2mo ago

You should not use .value inside a template. That is how vuejs works. So, <div>{{ my_redis_value.value }}</div> should be <div>{{ my_redis_value }}</div> That is ABC

IsaacR943OP•2mo ago

bruh started yesterday with the framework chill - its just another js frmk

Gaming

Programming

Stuck with reactivity not working